React Unforget

const NiceComponent = () => {
  const data = useData();
  const filteredData = [];

  for (let i = 0; i < 1000000000; i++) {
    filteredData.push(data[i]);
  }

  
  return (
    <div>
      <DependentComponent1 data={filteredData} />
      {/* ... */}
    </div>
  );
}

const UglyComponent = memo(() => {
  const data = useData();
  const filteredData = useMemo(() => {
    const items = [];
    for (let i = 0; i < 1000000000; i++) {
      items.push(data[i]);
    }
  }, [data]);
  
  const someComplexJsx = useMemo(() => (
    <>
      <DependentComponent1 data={filteredData} />
      {/* ... */}
    </>
  ), [dependency1, dependency2, filteredData]);

  return <div>{someComplexJsx}</div>;
});

See it in action

import { useState } from "react";

export default function CounterWithMutationTracking() {
  const [state, setState] = useState(0);

  let text = "The number is: ";

  if (state % 2 === 0) {
    text += "even";
  } else {
    text += "odd";
  }

  return (
    <div>
      <button onClick={() => setState(state + 1)}>Increment</button>
      <div>
        <span>Count: {state}</span> {text}
      </div>
    </div>
  );
}

export default function App() {
  return <div>Compiling...</div>;
}

Dive into the collection of examples and documentation to see React Unforget in action.

Why React Unforget?

1. Intelligent component and hook memoization: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code.
2. Granular JSX element unwrapping: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use React.memo.
3. Memoization beyond early returns: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components.

How about React Compiler (Forget)?

As of today, React Compiler is not yet released. It's been in the works for a while and it's not clear when it will be released.

Having an alternative like React Unforget to the React Compiler is akin to what Preact is to React. It serves not just as a backup plan but as a boundary-pusher, challenging the status quo and driving innovation within the React ecosystem. By offering a different approach to optimization and performance enhancements, React Unforget encourages diversity in solutions and approaches, fostering a healthy competitive environment where the ultimate winner is the developer and, by extension, the end-user.