How to prevent unecessary rerenders in child components dependent on memoized parent component state

link to sandbox

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

1. a rerender of all of the Options
2. a rerender of SomeComponent which 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.

>Solution :

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.

See: https://reactjs.org/docs/react-api.html#reactmemo