Summary - React Compiler

Write a performant list without manual memo thanks to the compiler.

Summary - React Compiler

In this group you learned what the React Compiler does, automatic memoization and compatibility rules.

The compiler removes the burden of writing useMemo and useCallback; it wraps derived values and callbacks with stable references automatically. Components must be pure; side effects go into useEffect.

Now you will write a component that combines these rules.

Exercise Write the SearchResults component

Write SearchResults. Take query and items props. Compute results with items.filter(item => item.name.includes(query)). Inside a <div> show <p>{results.length}</p> and inside a <ul> map results to <li key={item.id}>{item.name}</li>. Export it.

Show example solution

function SearchResults({ query, items }) {
  const results = items.filter(item => item.name.includes(query));
  return (
    <div>
      <p>{results.length}</p>
      <ul>{results.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}
export default SearchResults;

Test yourself

Which is wrong about the React Compiler?
- It is on by default in all projects
- Components must be pure
- It works as a Babel plugin
- You no longer need useCallback
Show answer

It is on by default in all projects — It is not yet default in all projects.

Fill in the blank: compute the derived value

function SearchResults({ query, items }) {
  const results = items.____(item => item.name.includes(query));
  return <p>{results.length}</p>;
}

Show answer

function SearchResults({ query, items }) {
  const results = items.filter(item => item.name.includes(query));
  return <p>{results.length}</p>;
}

Match concepts

auto memoization

Prevents needless calc
pure render

No side effects
useEffect

Side effects here
Babel plugin

Includes in build

Next lesson: What are Server Components?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies