How can a React parent component with arbitrarily many children update a selected child by its string id without using useRef?

Question

I have a React Hook component named List for example with an arbitrary number of children called Entry (adding or removing is possible). If data for an Entry changes, how can I update it without re-rendering the parent which will re-render all its siblings which may be huge. I would like to avoid useRef and useImperativeHandle, first because my codes becomes more complex and using react-sortable-hoc makes it impossible to use them.

Answer 1

No child component can re-render if its parent doesn't. You should instead prevent re-render for your Entry component by using React.memo or shouldComponentUpdate, so that children that haven't changed won't be re-rendered.