How does useState() in react retrieve the correct state object and function for a functional component when using the state hook? [duplicate]

Question

I am currently working on my understanding of the useState hook from react.

What I would like to know is; when useState is called how is it able to correctly retrieve the state object and the function that can be used to modify it, for that specific functional component (assuming it has already been created the first time it was called.)

Another way to phrase my question would be where does count and setCount exist? useState() will obviously return a different state object and modifier function depending on which functional component useState is called in, so how does that work?

My guess would be that a closure is formed which means that this functional component has a lexical environment which consists of any local variables that were in-scope at the time the closure was created and this is what makes count and setCount available when useState is called. But I haven't been able to confirm this and since react is involved I could be way off.

export const MyFunctionalComponent = () => {

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

return (
    <h1>This is my component.</h1>
);

}

Can anyone clear this up for me?

@edit: I'm pretty sure I'm way off with my thinking about closures, looking at the react library source code I found the implementation for the useState function.

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

I'm probably going to have to dig in and unpack this to get an answer.

I'm not sure if I really got your question.is it about how are hooks working under the hood? then medium.com/@ryardley/… should help — skyboyer
– skyboyer, Commented Feb 25, 2019 at 6:33
Thank you @ShubhamKhatri that looks fairly similar to what I wanted to know — AdaRaider
– AdaRaider, Commented Feb 25, 2019 at 7:12
Glad it provided you with information you wanted to know. Closing this as a duplicate in favour of the other question then — Shubham Khatri
– Shubham Khatri, Commented Feb 25, 2019 at 7:14
Here's another (more detailed than most people care about) answer to the same question: stackoverflow.com/questions/53974865/… — Ryan Cogswell
– Ryan Cogswell, Commented Feb 25, 2019 at 19:29

AdaRaider · Accepted Answer · 2019-02-25 07:05:33Z

3

I found the following on the React documentation page which at least gives a basic description on how useState is able to get back local state for functional 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.

answered Feb 25, 2019 at 7:05

AdaRaider

1,14610 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How does useState() in react retrieve the correct state object and function for a functional component when using the state hook? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related