Question 1

When should I use useMemo and useCallback?

Accepted Answer

Both cache something between renders. Memoising a value caches a computed result; memoising a callback caches a function identity. They are the same mechanism applied to different things, and both are more often used unnecessarily than usefully.

There are two situations where they genuinely earn their place.

The first is a computation expensive enough to notice. Sorting or filtering a large collection on every render, when the input rarely changes, is a real cost worth caching. The threshold is higher than people assume: most computations in a component are trivial next to the render itself.

The second, and more important in practice, is referential stability. An object, array or function created in a component body is a new instance on every render. Passing one to a memoised child defeats the memoisation entirely, because the props compare as changed. Passing one as an effect dependency causes that effect to run every render. In both cases the memoisation is not an optimisation, it is required for correctness of the thing depending on it.

That second case is the one worth internalising, because it explains why a memoised child component still re-renders constantly.

The cost of using them everywhere is not zero. Each adds a dependency array to maintain, occupies memory, and performs a comparison on every render. Applied reflexively they add noise and a new category of bug, where a stale dependency array produces a cached value that should have changed.

The reasonable default is to write straightforward code, then measure. React includes a profiler that identifies which components actually re-render expensively, which is a far better guide than intuition.

Question 2

What are some effective React performance optimization techniques?

Accepted Answer

Optimizing React performance involves techniques like code splitting, memoization, and lazy loading to enhance speed and responsiveness. Implement these methods based on your app's needs.

Question 3

How to optimize React app performance?

Accepted Answer

Optimizing React app performance involves strategies like code splitting, memoization, lazy loading, and optimizing state management. These techniques enhance rendering speed and reduce resource consumption.

Question 4

What is the useEffect dependency array for?

Accepted Answer

The dependency array tells React which values the effect uses, so it can decide whether to run it again after a render. Omitting the array runs the effect after every render. Passing an empty array

Question 5

Why is cache invalidation considered hard?

Accepted Answer

The famous quip from Phil Karlton is that there are two hard things in computer science: cache invalidation and naming things. The joke endures because the problem is genuinely difficult, and the

Question 6

What are the common caching strategies?

Accepted Answer

A small number of patterns that differ in who writes to the cache and when — and choosing the wrong one for your consistency requirements is where cache bugs come from. The read patterns:

Question 7

Why is my React state not updating immediately?

Accepted Answer

State updates are not applied immediately. Calling the setter schedules a re-render; it does not change the variable you are currently holding. Reading that variable on the next line gives you the

Related Questions