React19Compiler徹底解説:useMemo、useCallbackの不要化とProfilerベンチマーク

// Before React 19 Compiler
import React, { useMemo, useCallback } from 'react';

interface Item {
  id: string;
  name: string;
}

interface MyListProps {
  items: Item[];
  onClick: (id: string) => void;
}

function MyList({ items, onClick }: MyListProps) {
  // Manual memoization required for referential stability
  const renderItem = useCallback((item: Item) => {
    return (
      <li key={item.id} onClick={() => onClick(item.id)}>
        {item.name}
      </li>
    );
  }, [onClick]); // Dependency on onClick

  const memoizedData = useMemo(() => {
    return items.map(item => ({ ...item, processed: true }));
  }, [items]); // Dependency on items

  return (
    <ul>
      {memoizedData.map(renderItem)}
    </ul>
  );
}

export default MyList;

// After React 19 Compiler (conceptual, compiler inserts the actual memoization)
import React from 'react'; // No useMemo/useCallback needed

interface Item {
  id: string;
  name: string;
}

interface MyListProps {
  items: Item[];
  onClick: (id: string) => void;
}

function MyList({ items, onClick }: MyListProps) {
  // Compiler automatically memoizes this function
  const renderItem = (item: Item) => {
    return (
      <li key={item.id} onClick={() => onClick(item.id)}>
        {item.name}
      </li>
    );
  };

  // Compiler automatically memoizes this array creation
  const memoizedData = items.map(item => ({ ...item, processed: true }));

  return (
    <ul>
      {memoizedData.map(renderItem)}
    </ul>
  );
}

export default MyList;

// Simplified conceptual output from React Compiler
function MyList(props) {
  const { items, onClick } = props;

  // Compiler-generated memoization for renderItem
  const renderItem = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.memoize(
    () => (item) => {
      return React.createElement("li", {
        key: item.id,
        onClick: () => onClick(item.id)
      }, item.name);
    },
    [onClick] // Compiler infers dependencies
  );

  // Compiler-generated memoization for memoizedData
  const memoizedData = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.memoize(
    () => items.map(item => ({ ...item, processed: true })),
    [items] // Compiler infers dependencies
  );

  return React.createElement("ul", null, memoizedData.map(renderItem));
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    reactCompiler: true, // Enable the React Compiler
  },
};

module.exports = nextConfig;

npm install --save-dev eslint-plugin-react-compiler
# or
yarn add --dev eslint-plugin-react-compiler

// .eslintrc.js
module.exports = {
  // ... other ESLint configurations
  plugins: [
    // ... other plugins
    'react-compiler',
  ],
  rules: {
    // ... other rules
    'react-compiler/react-compiler': 'error', // Enable the compiler lint rule
  },
};

// App.tsx
import React, { useState } from 'react';
import MyList from './MyList'; // MyList from previous example

interface Item {
  id: string;
  name: string;
}

const initialItems: Item[] = Array.from({ length: 1000 }, (_, i) => ({
  id: String(i),
  name: `Item ${i}`,
}));

function App() {
  const [count, setCount] = useState(0);

  const handleClick = (id: string) => {
    console.log(`Clicked item: ${id}`);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>Increment Count</button>
      <MyList items={initialItems} onClick={handleClick} />
    </div>
  );
}

export default App;

function BadComponent({ data }: { data: { value: number } }) {
  // Compiler assumes 'data' is referentially stable if its reference doesn't change.
  // Mutating 'data.value' directly will not trigger a re-render if 'data' itself is the same object.
  data.value++; // DANGER: Direct mutation
  return <div>Value: {data.value}</div>;
}

function Parent() {
  const [obj, setObj] = useState({ value: 0 });
  // This will NOT cause BadComponent to re-render when obj.value is mutated internally
  // because the 'obj' reference itself doesn't change.
  return <BadComponent data={obj} />;
}

function GoodComponent({ data }: { data: { value: number } }) {
  // Compiler correctly detects change if 'data' is a new object
  return <div>Value: {data.value}</div>;
}

function Parent() {
  const [obj, setObj] = useState({ value: 0 });

  const updateValue = () => {
    // Create a new object to ensure referential equality changes
    setObj(prev => ({ ...prev, value: prev.value + 1 }));
  };

  return (
    <>
      <button onClick={updateValue}>Update Value</button>
      <GoodComponent data={obj} />
    </>
  );
}

function StaleClosureComponent() {
  const [count, setCount] = useState(0);

  // Compiler memoizes 'logCount' but it captures 'count' from its initial render
  // if 'count' is not explicitly listed as a dependency for the effect.
  const logCount = () => {
    console.log('Current count:', count);
  };

  useEffect(() => {
    // This effect runs once and uses the 'logCount' from the initial render,
    // which always logs 0, even if count updates.
    const interval = setInterval(logCount, 1000);
    return () => clearInterval(interval);
  }, []); // Missing dependency: logCount

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

function CorrectClosureComponent() {
  const [count, setCount] = useState(0);

  // Compiler memoizes 'logCount', and it will be re-created if 'count' changes.
  // This is fine, as the effect will re-run and capture the new 'logCount'.
  const logCount = () => {
    console.log('Current count:', count);
  };

  useEffect(() => {
    // Now, 'logCount' is a dependency. When 'count' changes, 'logCount' is re-created
    // by the compiler, and this effect re-runs, capturing the new 'logCount' with the updated 'count'.
    const interval = setInterval(logCount, 1000);
    return () => clearInterval(interval);
  }, [logCount]); // Correct dependency

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}