Is memo really useful on Square? With only useCallback, each <div> element's onClick would be the same, so the DOM wouldn't be touched.
As for the Row component, given that the items never change here, you don't really need to chunk the array actually, right? A single <Row> with items={data} would be enough to memoize the whole subtree of squares (thanks to React.memo), which could also be achieved by constructing the squares' list inside a useMemo.
memo on Square would help in avoiding the Square component function to run when the App or Row component state changes. If memo is not used React would run each component function to build the tree and check if any dom update is needed. There wouldn't be any dom update even if we skip memo but the component functions would still run and can be costly if it involves a large number of components or complex logic to render each component.
Is
memoreally useful onSquare? With onlyuseCallback, each<div>element'sonClickwould be the same, so the DOM wouldn't be touched.As for the
Rowcomponent, given that the items never change here, you don't really need to chunk the array actually, right? A single<Row>withitems={data}would be enough to memoize the whole subtree of squares (thanks toReact.memo), which could also be achieved by constructing the squares' list inside auseMemo.memoonSquarewould help in avoiding theSquarecomponent function to run when theApporRowcomponent state changes. Ifmemois not used React would run each component function to build the tree and check if any dom update is needed. There wouldn't be any dom update even if we skipmemobut the component functions would still run and can be costly if it involves a large number of components or complex logic to render each component.I was specifically talking about that example, with this specific Square component.