Question 1

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 old value, because the current render already captured it and nothing in this execution can change it.

This is by design rather than a limitation. React batches updates within an event so several changes cause one re-render instead of several, which is a meaningful performance property.

The practical consequence appears in two shapes.

The first is reading state right after setting it. The value you see is the one from this render. If you need the new value, use it directly, or read it in an effect that runs after the update.

The second is updating based on the previous value, which is where real bugs live. Calling a setter twice with an expression based on the current variable applies the same base value twice, so two increments produce one. Passing a function to the setter instead receives the latest pending value and composes correctly. Any update derived from the previous state should use the functional form as a habit.

A related problem is the stale closure. A callback created in one render captures that render variables. If it is stored somewhere long-lived, such as an interval or an event listener registered once, it keeps seeing the original values however many renders have happened. The functional setter form avoids it for state, and dependency arrays that include everything the callback uses avoid it more generally.

If you find yourself reaching for a ref to read current state, that is usually a signal the logic belongs in a reducer instead.

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 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 4

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 5

What is state management, and why is it hard?

Accepted Answer

State is any data that changes over time and affects behaviour. Managing it is hard because state creates dependencies across time — and time is the dimension our reasoning handles worst. Why it is

Question 6

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 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