React Compiler Has Free Auto-Optimization — Here's Why You Can Delete useMemo and useCallback

React Compiler automatically memoizes your components. No more manual useMemo, useCallback, or React.memo. What is React Compiler? React Compiler (formerly React Forget) is a build-time tool that automatically adds memoization to your React components. It understands your code and inserts optimizations that you used to write by hand. What It Replaces // BEFORE: Manual memoization everywhere function TodoList ({ todos , filter }) { const filteredTodos = useMemo ( () => todos . filter ( t => t . status === filter ), [ todos , filter ] ); const handleToggle = useCallback ( ( id : string ) => { dispatch ({ type : ' TOGGLE ' , id }); }, [ dispatch ] ); return ( < ul > { filteredTodos . map ( todo => ( < MemoizedTodoItem key = { todo . id } todo = { todo } onToggle = { handleToggle } /> )) } </ ul > ); } const MemoizedTodoItem = React . memo ( TodoItem ); // AFTER: Just write normal React function TodoList ({ todos , filter }) { const filteredTodos = todos . filter ( t => t . status === filt