Summary - React Compiler
- React course
- Expert
- Lesson 4/32
- 5 min
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.
Practice 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.
Starter code
// Write the SearchResults component hereSample 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;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is wrong about the React Compiler?
- It is on by default in all projects Correct answer
- Components must be pure
- It works as a Babel plugin
- You no longer need useCallback
Explanation: It is not yet default in all projects.
2 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>;
}function SearchResults({ query, items }) {
const results = items.filter(item => item.name.includes(query));
return <p>{results.length}</p>;
}Explanation: items.filter computes the search result.
3 Match concepts
| Term | Meaning |
|---|---|
auto memoization |
Prevents needless calc |
pure render |
No side effects |
useEffect |
Side effects here |
Babel plugin |
Includes in build |