DEV Community: Nikhil Dabhade

What actually causes React to re-render

Nikhil Dabhade — Tue, 02 Jun 2026 14:30:00 +0000

Most React developers think that React only re-renders because we have done some state update and while it is true, it's not the only reason behind it.

Render ≠ DOM Updates

First, we need to understand what a render actually means in React.
Render !== DOM Updation

Render does not mean DOM updates, a component can re-render multiple times without any DOM update.

function Counter() {
  console.log("rendered");

  return <h1>Counter</h1>;
}

Even though the above example doesn't have any state or props still it can re-render while DOM remains unchanged.

What Actually Happens During a Render?

So now the question arises, what actually is render in react?

Render is the process where:

React calls your component function.
It produces a new React element tree.
React compares it with the previous tree (reconciliation).
Only necessary DOM updates are applied (e.g. Component is using any state which changed) or no DOM updates.

Common Reasons React Re-renders

1. Parent Re-renders Cause Child Re-renders

function Parent() {
  const [count, setCount] = useState(0);

  return <Child />;
}

When Parent re-renders:

Parent()
Child()

both execute again, Even if Child receives no props.

How to prevent the child from re-render?

const Child = React.memo(function Child() {
  console.log("Child render");
  return <div>Child</div>;
});

Just wrap it with React memo.

2. Props Changes

When count changes Child receives new props and re-renders.

function Parent() {
  const [count, setCount] = useState(0);

  return <Child count={count} />;
}

3. Functions and Objects Cause Extra Re-renders

Even though we have wrapped our child with React memo still it will cause re-render if we pass functions and objects.

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("clicked");
  }

  return <Child onClick={handleClick} />;
}

Because the memo only compares the reference of the old and new function (or object), this is called shallow compare.

If a memoized child receives functions or objects as props, useCallback and useMemo can help preserve references and avoid unnecessary re-renders.

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []);

  return <Child onClick={handleClick} />;
}

Now it will not cause extra re-renders

4. Strict Mode

In strict mode React intentionally invokes component render logic twice to help detect side effects.

<React.StrictMode>

But this only happens in development environment not in production.

5. Context

<ThemeContext.Provider value={theme}>

When the value changes,

const theme = useContext(ThemeContext);

Every component consuming that context re-renders.

6. External Store Updates

Libraries (Redux, Zustand) using:

useSyncExternalStore()

I've explained this here in detail.

7. State Updates

The most obvious action which causes React to re-render

const [count, setCount] = useState(0);

setCount(count + 1);

But if the value doesn't change, React may not call the component again (at least in case of primitive types).
Check if the same object or array will cause the re-render or not.

React re-renders are not totally bad. Rendering is simply React calling your component function again. The real cost comes from expensive computations, large component trees, and unnecessary DOM updates. Before using React.memo, useMemo, or useCallback, make sure a re-render is actually causing a big performance problem.

Build Your Own React useState Hook Under 40 Lines

Nikhil Dabhade — Tue, 26 May 2026 14:30:00 +0000

useState looks simple on the surface, but behind it is one of the core ideas that makes React work: persistent state + re-rendering. In this article, we'll build a tiny version of useState ourselves to understand the mental model behind it.

Understanding the Basic Idea Behind useState

First, we know that the useState returns a state and a function to update that state.

const [state, setState] = useState()

Think of this as a function that returns a value and a setter function which updates the value.

function useState() {
    let state;

    const setState = (newState) => {
      state = newState;
    };

    return [state, setState];
 }

That's it! Quite simple isn't it.

Not really, we are missing the initial value and one issue which you might notice if you look carefully (Take a moment to find the issue).

Why Our State Keeps Resetting

The issue is that we have declared the state inside useState, So on every render the useState will get called and the state will become undefined every time.

First render -> value was undefined -> you made it to 1 -> Second Render -> value again became undefined.

After fixing that issue, we finally have something closer to what we wanted.

Persisting State Between Renders

let state;
function useState<T>(initialValue:T) {
    if(state === undefined){
      state = initialValue
    }
    const setState = (newState:T) => {
      state = newState;
    };

    return [state, setState];
 }

Nice! we have built our own useState hook and now it's time to use it and check the results of our hard work. I've used our hook inside that App.tsx and added one handleIncrement to increase the count

Why Updating State Still Doesn't Work

Wait a second, even after clicking on the increment button the number is not updating. But why's that!

Because React has no idea the state changed. When React's real useState updates, React schedules the component to render again.

So we'll need to tell the react to render the component if our state changes.

Making React Re-render

That's where the useSyncExternalStore react hook comes into the picture. This hook tells the react to check for our state updates, re-render the component and give us the updated state.

Understanding useSyncExternalStore

const value = useSyncExternalStore(
  subscribe,
  getSnapshot
);

React expects two functions here:

subscribe → tells React how to listen for changes
getSnapshot → tells React how to read the latest value

That’s it.

Unlike useState, React does not manage the state for you here.

Instead, React simply acts as a subscriber to an external store.

Understanding `subscribe`

When React calls your subscribe function, it gives you a listener callback.

const subscribe = (listener: () => void) => {
  listeners.add(listener);

  return () => listeners.delete(listener);
};

That listener is the function React wants you to call whenever your store changes.

Later, when state updates, we manually trigger all listeners:

listeners.forEach((listener) => listener());

And once those listeners run, React knows it should re-render subscribed components.

Final Implementation

// useState.ts
import { useSyncExternalStore } from "react";

const listeners = new Set<() => void>();
let state;

function useState<T>(initialState: T) {
  if (state === undefined) {
    state = initialState;
  }
  const setState = (newState: T) => {
    if (state === newState) return;
    state = newState;
    listeners.forEach((listener) => listener());
  };

  const getState = () => state;

  const subscribe = (listener) => {
    listeners.add(listener);

    return () => listeners.delete(listener);
  };

  const updatedState = useSyncExternalStore(subscribe, getState);

  return [updatedState, setState];
}

export { useState };

We have stored the listeners in a set and called them only when the state changes (if previous value is 1 and new value is also 1 then just return, no re-renders).

What happens after you click the handleIncrement

setState()
   ↓
update state
   ↓
notify listeners
   ↓
React re-renders
   ↓
new state appears

Now you'll see that our custom hook is finally working!

Where Our Implementation Falls Short

So is this how the React useState works? ummm not really, i mean we have a good mental model of how it might be but the actual react useState does a lot more than this.

Our version doesn't support multiple state, even if you create more than one state using our hook it will just override the previous state.
React supports functional updates setState(prev => prev + 1);, something you can build on top of this as practise.
Our state compare in setState (line no. 11) works for primitive types, but what about objects? find out!

And there are many more, this implementation was just to give you the idea of how useState and useSyncExternalStore works.

Final Thoughts

We didn’t recreate React’s real useState implementation here.

Internally, React does something much more using the Fiber architecture and hook tracking.

But building a tiny version like this helps make the “magic” behind hooks feel much more understandable.

And honestly, that’s one of the best ways to learn React internals:
build simplified versions yourself.