Let's make a primitive useState Hook

Prashant Jha — Sat, 19 Mar 2022 19:18:40 +0000

`useState` A magical hook or an 'Array'?, lets find out.

Let's make a function which will return a useState function.

const React = () => {
  return {
    useState: () => {}, 
  };
};

Declare a let variable inside React function, this variable will store our state value.

const React = () => {
  let stateValue;
  return {
    useState: () => {}, 
  };
};

Let's do some quick coding.

const React = () => {
  let stateValue;
  return {
   useState: (initialState) => {
     stateValue = stateValue || initialState;
     const setState = (newStateValue) => {
       stateValue = newStateValue;
     };
     return [stateValue, setState];
    },
  };
};

In above code, we are returning an array from useState in which stateValue is a variable which will hold our current state value, and setState is a function this will accept a updated value and set it to stateValue, this is how the state going to update.

This was the all concept, you can checkout the working code here

Comment below for any sort of question from that code.

Stale Closures in React.useEffect() Hook "A Weird Bug for New React Learners"

Prashant Jha — Mon, 07 Mar 2022 19:58:26 +0000

It was a beautiful day, my day was going almost good but suddenly...
I encountered stale closures in React.useEffect()

This was my code, ahh... a simple and small code but good enough to frustrate you.

When you run this code, It will show

Hello Bucky

on screen.

Haha, Nah It'll not

The thing is it'll only show Hello + "", I mean only Hello.
Why?
because of closures.
Hey, what is closures?
Checkout this video

Okay got it? That video on closure was amazing isn't it...
Now let's continue.

Here are two ways you can solve this problem

The useEffect's dependency array
&
Using a ref instead of a useState

The useEffect's dependency array

On line 15 just put user in dependency array, so from now whenever user value will get updated the useEffect() will render again and new value of user will get set in line 14.

But, this approach will set greeting twice one with previous("") user value and one with updated("Bucky") user value as useEffect() will render twice.

Let's look into another better solution to tackle this stale closures issue.

Using a ref instead of a useState

What is useRef()?

Watch this video

As, in previous approach useEffect() was rendering twice, but in this useEffect() will only run once.

If you are thinking which is better, I believe it's depend more upon on your use case.

Cool... Now It's end, if you're having any suggestion in this article please update me in comment, I'll love to update this article with more better information. Thankyou Have a great day.

DEV Community: Prashant Jha

Let's make a primitive useState Hook

useState A magical hook or an 'Array'?, lets find out.

Stale Closures in React.useEffect() Hook "A Weird Bug for New React Learners"

`useState` A magical hook or an 'Array'?, lets find out.