This small project was created to experiment with the new React Compiler and observe how it optimizes rendering behavior in functional components — without using React.memo, useCallback, or useMemo manually.
The goal is to test how React Compiler automatically handles component re-rendering, ensuring that:
- Parent components do not re-render when a child updates its state.
- Each component manages its own state internally.
- The app remains performant and predictable even without manual memoization.
App
├─ TextInputCard → handles local text input
├─ CounterCard → handles a local counter
└─ ItemsListCard → manages a list of items
Each child component logs its own render to the console (e.g., Render Counter) so you can track when each one re-renders.
-
Install dependencies:
npm install
-
Run the app in development mode:
npm run dev
-
Open your browser and inspect the console — you’ll see logs showing when each component renders.
- No need for
React.memo,useCallback, oruseMemo. - Each component’s render behavior is optimized automatically.
- The test demonstrates isolation of state and component boundaries, which the compiler uses to skip unnecessary renders.
- To enable/disable React Compiler, just add/remove the
'babel-plugin-react-compiler'on babel plugins, onvite.config.ts