react-re-render-example

Three example pages with a grid of 100 cells to demonstrate re-rendering behavior when using React:

Non-optimized example - shows updating a cell causes all other cells to re-render
Optimized example - uses React's memo and useCallback so that only one cell is re-rendered on update
Broken memo example - shows how adding a prop can break memoization

Usage

Install project dependencies and run the dev server
```
$ npm install
$ npm run dev
```

Install React Dev Tools
Open the browser Dev Tools
Go to the React Dev Tools "Profiler" tab
Click the gear icon to open the React Dev Tools settings
Ensure "Highlight updates when components render" is checked
Go to http://localhost:3000/non-optimized-grid and see that all the cells render whenever one of the "Increment" buttons are clicked
Go to http://localhost:3000/optimized-grid and see that only one cell renders when its "Increment" button is clicked
Go to http://localhost:3000/broken-memo-grid and see that it behaves the same as http://localhost:3000/non-optimized-grid

Open the browser Dev Tools
Go to the "Console" tab
Go to http://localhost:3000/non-optimized-grid and see that "render" is logged 100 times whenever one of the "Increment" buttons are clicked
Go to http://localhost:3000/optimized-grid and see that "render" is logged only 1 time when a cell's "Increment" button is clicked
Go to http://localhost:3000/broken-memo-grid and see that it behaves the same as http://localhost:3000/non-optimized-grid

Open the browser Dev Tools
Go to the "Console" tab
Go to http://localhost:3000/broken-memo-grid?wdyu=1 and see that useWhyDidYouUpdate shows that the potentiallyMemoBreakingProp prop passed to MemoizedCell is not equal whenever one of the "Increment" buttons are clicked