App has state from which a memoized value is computed which is passed to the Options as props. When the state changes due to a callback passed to Option, App is rerendered, causing
- a rerender of all of the
Options - a rerender of
SomeComponentwhich doesn't even take any props
I am looking for a pattern using React hooks and state management that would allow for only 2 of the Options to be rerendered - the one that is deselected, because its isSelected property goes from true to false, and the one that is selected, because its isSelected property goes from false to true. I do not understand why the other child components, particularly SomeComponent, need to be rerendered, when their props do not change.
CodePudding user response：
This is typically done with React.memo to make components who's render is only dependant on their props not re-render unless their props change.