How to avoid using memoisation?

In practice, you can make a lot of memoization unnecessary by following a few principles:

1
When a component visually wraps other components, let it accept JSX as children. This way, when the wrapper component updates its state, React knows that its children don’t need to re-render.
2
Prefer local state and don’t lift state up any further than necessary. For example, don’t keep transient state-like forms and whether an item is hovered at the top of your tree or in a global state library.
3
Keep your rendering logic pure. If re-rendering a component causes a problem or produces some noticeable visual artefact, it’s a bug in your component! Fix the bug instead of adding memoization.
4
Avoid unnecessary Effects that update the state. Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
5
Remove unnecessary dependencies from your Effects. instead of memoization,.

Difficulty: 5/10

Topics: useMemo, useCallback, render performance

0-2 years experience

1
You have a functional component that receives an array of items and maps over it to render rows. The team suggests adding useMemo to cache the mapped list. How would you decide whether to add that memoisation?
2
If a component re‑renders even though its props haven't changed, what steps would you take before reaching for useMemo?
3
What happens if you wrap a component with React.memo but still pass a new inline function as a prop on every render?

2-5 years experience

1
In a dashboard, a parent fetches a large object and passes it to several children, some of which use useMemo. The UI is still sluggish. Walk me through how you would evaluate whether memoisation is the right tool or if you should restructure the data flow.
2
During a code review you see a useCallback wrapping an event handler that only calls console.log. Explain why you might remove that useCallback and what impact it has.
3
A bug appeared after a developer added useMemo to cache a derived value, but the value became stale when an unrelated prop changed. How would you fix the issue without relying on memoisation?

5-8 years experience

1
Design a reusable list component library that must handle thousands of items. Discuss where you would apply memoisation, where you would avoid it, and alternative strategies like virtualization or immutable data structures.
2
Your team is refactoring a legacy codebase that heavily uses useMemo and React.memo, and some modules are now leaking memory. Explain how you would reduce unnecessary memoisation while keeping performance, and what tooling you would use to validate the changes.
3
In a micro‑frontend architecture, multiple teams independently memoise shared UI components. What are the risks of over‑memoising across team boundaries, and how would you set guidelines to avoid those pitfalls?

8+ years experience

1
The company is migrating a monolithic React app to a component‑driven design system, and the current codebase contains many premature useMemo and useCallback hooks. Outline a migration strategy that systematically identifies and removes unnecessary memoisation, ensures performance regressions are caught, and establishes long‑term guidelines for when memoisation is appropriate.
2
As a technical lead, you need to convince senior engineers that avoiding memoisation in certain high‑frequency render paths can reduce bundle size and improve startup time. How would you build a data‑driven case, and what architectural changes would you propose to embed that philosophy into the CI/CD pipeline?
3
When scaling a real‑time collaborative editor built with React, you notice excessive memoisation causing stale state propagation across users. Describe how you would redesign the state management and component hierarchy to minimize reliance on memoisation while preserving responsiveness.