Values computable from props and current state usually belong in rendering. Storing them separately adds synchronization and inconsistent intermediate states.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: Filter a list from items and the search query during render. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify source values
Items and query are the actual editable inputs. Filtered items can always be reconstructed from those inputs.
Step 2: Compute during rendering
Calculate the filtered list directly. An Effect copying the result introduces another render and an intermediate stale list.
Step 3: Measure before caching
Use memoization only if calculation cost matters. Correctness should be unchanged when the cache is absent or recomputed.
Worked scenario
Filter a list from items and the search query during render.
const visibleItems = items.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
return <ul>{visibleItems.map(item =>
<li key={item.id}>{item.name}</li>
)}</ul>;Changing the query or items immediately changes the calculation in that render. No separate setter must be remembered when data is inserted or removed.
Common mistake
An Effect that copies the filtered list into state creates another update cycle.
Verify the behavior
Change query, then replace items while keeping query unchanged. Both must update the visible list without an Effect-driven synchronization gap.
Interview exercise
When is memoization appropriate?
Answer and reasoning
When measurement shows expensive recalculation and dependencies are stable; it is a performance optimization rather than the source of truth.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.