Question 1

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 runs it once after mount. Listing values runs it whenever any of them changes.

The rule is that everything from component scope used inside the effect belongs in the array. The linting rule enforcing this is worth leaving enabled, because a missing dependency means the effect closes over a stale value and quietly uses outdated data.

Two failure modes dominate.

An infinite loop happens when the effect updates state that is itself a dependency, or depends on a value recreated every render. Objects, arrays and functions defined in the component body are new instances each render, so comparing them by identity always finds them changed. Moving the definition outside the component, memoising it, or depending on the specific primitive fields instead all break the cycle.

Running too often is the milder version of the same thing, usually because a dependency changes more frequently than expected.

The instinct to silence the linter is the wrong move. A missing dependency does not remove the dependency, it hides it, and the resulting bug is a value that is subtly wrong rather than an error. If the effect should genuinely not re-run when something changes, the honest fixes are moving that value into a ref, or using the functional setter form so the effect no longer needs to read the current state.

It is also worth asking whether the effect is needed at all. Deriving a value during render, rather than storing it in state via an effect, is simpler and avoids the question entirely.

Question 2

What is a race condition in a React useEffect and how do I avoid it?

Accepted Answer

The problem appears whenever an effect starts an asynchronous request that depends on a changing value. If the value changes again before the first request finishes, two requests are in flight, and

Question 3

What is the React component lifecycle explained?

Accepted Answer

The React component lifecycle consists of Mounting, Updating, and Unmounting phases, each with specific methods that manage component behavior and performance.

Question 4

Why does my React component render twice in development?

Accepted Answer

In development, Strict Mode deliberately renders components twice and runs effects twice, mounting, unmounting and remounting them. This does not happen in production builds. It is not a bug and not

Question 5

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

Question 6

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

Question 7

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.

Related Questions