How does React.useState triggers re-render?

Question

import { useState } from 'react';  function Example() {   const [count, setCount] = useState(0);    return (     <div>       <p>You clicked {count} times</p>       <button onClick={() => setCount(count + 1)}>         Click me       </button>     </div>   ); } 

In the above example whenever setCount(count + 1) is invoked a re-render happens. I am curious to learn the flow.

I tried looking into the source code. I could not find any reference of useState or other hooks at github.com/facebook/react.

I installed react@next via npm i react@next and found the following at node_modules/react/cjs/react.development.js

function useState(initialState) {   var dispatcher = resolveDispatcher();   return dispatcher.useState(initialState); } 

On tracing back for dispatcher.useState(), I could only find the following ...

function resolveDispatcher() {   var dispatcher = ReactCurrentOwner.currentDispatcher;   !(dispatcher !== null) ? invariant(false, 'Hooks can only be called inside the body of a function component.') : void 0;   return dispatcher; } 

var ReactCurrentOwner = {   /**    * @internal    * @type {ReactComponent}    */   current: null,   currentDispatcher: null }; 

I wonder where can I find dispatcher.useState() implementation and learn how it triggers re-render when setState setCount is invoked.

Any pointer would be helpful.

Thanks!

Answer 1

The key in understanding this is the following paragraph from the Hooks FAQ

How does React associate Hook calls with components?

React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from React components).

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

(This also explains the Rules of Hooks. Hooks need to be called unconditionally in the same order, otherwise the association of memory cell and hook is messed up.)

Let's walk through your counter example, and see what happens. For simplicity I will refer to the compiled development React source code and React DOM source code, both version 16.13.1.

The example starts when the component mounts and useState() (defined on line 1581) is called for the first time.

function useState(initialState) {   var dispatcher = resolveDispatcher();   return dispatcher.useState(initialState); } 

As you have noticed, this calls resolveDispatcher() (defined on line 1546). The dispatcher refers internally to the component that's currently being rendered. Within a component you can (if you dare to get fired), have a look at the dispatcher, e.g. via

console.log(React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) 

If you apply this in case of the counter example, you will notice that the dispatcher.useState() refers to the react-dom code. When the component is first mounted, useState refers to the one defined on line 15986 which calls mountState(). Upon re-rendering, the dispatcher has changed and the function useState() on line 16077 is triggered, which calls updateState(). Both methods, mountState() on line 15352 and updateState() on line 15371, return the count, setCount pair.

Tracing ReactCurrentDispatcher gets quite messy. However, the fact of its existence is already enough to understand how the re-rendering happens. The magic happens behind the scene. As the FAQ states, React keeps track of the currently rendered component. This means, useState() knows which component it is attached to, how to find the state information and how to trigger the re-rendering.