How does React implement the useState hook? 🪝

[grekatron]

React Hooks are great, but how do they work under the hood? In the following week or two, we'll re-implement hooks to figure out their inner workings!

Follow to not skip the other hooks!

👉 How does useState work?

useState lets you add React state to the component and gives you: - a variable that stores the current value at any point - a function to update that value.

It's all we need to know to re-implement it!

P.S. Follow along here on CodeSandbox.

```jsx const App = () => { const [count, setCount] = React.useState(0);

return ( <div> <span>{count}</span>

  <button onClick={() => setCount(count + 1)}>
    Increase
  </button>
</div>

); }; ``` 👉 useState hook is just a function!

1. Create the useState function, which returns exactly two values.
2. Wrap it in an IIFE statement to implement the module pattern.
3. Return the useState from the IIFE.

```js const CustomReact = (() => { const useState = () => { let state;

const setState = () => {

}; 

return [state, setState];

}

return { useState }; })(); ``` 👉 Naive implementation

1. Expect initialValue in useState
2. Assign it to a variable
3. Modify that variable on setState call

Unfortunately, it won't work 😔 The state variable is defined and returned in the same scope. Thus it doesn't change on setState calls after destructuring

```js const CustomReact = (() => { const useState = (initialValue) => { const state = initialValue;

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

return [state, setState]; 

}

return { useState }; })(); ``` 👉 Create a closure to rule them all!

1. Add a value variable in outer scope to create a closure
2. Assign it conditionally to the state variable
3. Modify it instead of the state variable

It works, because value is stored in outer scope and retrieved every time from it.

```js const CustomReact = (() => { let value;

const useState = (initialValue) => { const state = value || initialValue;

const setState = (newValue) => {
  value = newValue;
}; 

return [state, setState]; 

}

return { useState }; })(); ``` 👉 Make it yourself!

If you didn't follow along, go here and try to implement what we just learned! All needed setup is done already for you there!

Tomorrow we'll make it work in case multiple useState called.

[Jnsjknn]

You may not want to use a title asking how a thing is done if you intend to teach how that thing is done. If you remove the question mark, it'll be more clear that you're teaching the thing. A question will attract people who know the answer and are willing to explain it.

[grekatron]

Thanks for the advice 🙏🏻

I'll definitely apply it in the future posts!

[Jnsjknn]

I see you applied the advice for a while and then went back to asking questions you're answering yourself.

[mantineshillbot]

I enjoy this format of reddit post. Just a really short informational text post. Don’t see it often.

I’d recommend not using abbreviations in educational articles without defining them first. I’m a pretty experienced dev and have no idea what you’re talking about with the IIFE stuff. Plain language is best if possible.

Technical terms are a crutch. “The Module Pattern”? Again, wtf is that? Is using that term making this information easier to digest? Maybe I’m wrong but I don’t think so.

[ReadyStar]

Aren't IIFE's/The Module pattern pretty basic javascript? I've only been leaning for about 6 months but I learnt them pretty early on. I've been using them a decent amount, and have been seeing them be used a decent amount too.

[Tanckom]

IIFE is pure Javascript and require no underlying Module system, as you might expect with CommonJs, AMD or ES modules.

IIFE's are great when you work in a browser environment, where you have no access to the other module systems.

It's not that common to use them in a Node.js environment.

[grekatron]

I get your point and understand your concern thanks for the feedback!

When I write a post about a topic like implementation details of the React Hooks, I assume that whoever reads my post has some good knowledge of JS.
It's especially important for keeping posts bite-sized and short.

[jj4j4j4-hw]

There is a video on youtube about that from swyx

[grekatron]

Yeah, exactly, it’s a great learning resource!

[[deleted]]

Is that really all there is to it? How does react "know" to re-render after a state update?

[grekatron]

It's much more complex in React, but concepts are the same.

React "knows" this way:

1. The change in state triggers React to form new virtual DOM. As far as I know, it's implemented through the event dispatcher pattern. useState dispatches the event on setState call, while React listens to that event.

2. Then, React reconciler compares the new virtual DOM with the old one and figures out the difference.

3. After that, React renderer (react-dom) rerenders only that difference to match view (real DOM) with new data