3

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.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
AdaRaider
  • 1,126
  • 9
  • 20
  • 2
    I'm not sure if I really got your question.is it about how are hooks working under the hood? then https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e should help – skyboyer Feb 25 '19 at 06:33
  • Yeah, pretty much I'll take a look thanks! – AdaRaider Feb 25 '19 at 06:37
  • Thank you @ShubhamKhatri that looks fairly similar to what I wanted to know – AdaRaider Feb 25 '19 at 07:12
  • 2
    Glad it provided you with information you wanted to know. Closing this as a duplicate in favour of the other question then – Shubham Khatri Feb 25 '19 at 07:14
  • 1
    Here's another (more detailed than most people care about) answer to the same question: https://stackoverflow.com/questions/53974865/how-do-react-hooks-determine-the-component-that-they-are-for/53980190#53980190 – Ryan Cogswell Feb 25 '19 at 19:29

1 Answers1

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.

AdaRaider
  • 1,126
  • 9
  • 20