Blog- Optimizing React apps with Memo

changes.patch

--- a/src/App.js
+++ b/src/App.js
function Table(props) {
  console.log('render: Table');
  // other old code
}
 
+const OptimizedTable = React.memo(Table);

function App() {
  console.log('render: App');

  return (
    <div className={cn('app', `theme-${stateTheme}`)}>
      <main className="main">
        <Picker activeHouseId={stateActiveHouseId} onChange={handleFilter} />
        <p>List starts with {filteredCharacters[0].name}</p>
-       <Table charactersList={filteredCharacters} />
+       <OptimizedTable charactersList={filteredCharacters} />
      </main>
    </div>
  );
}