React useState Hook from Scratch

So hooks, like components, are nothing but JavaScript functions.

The specialty of the useState hook is that it can track the value of a variable.

Let’s create a basic component for us.

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

  return {
    count,
    setCount
  }
}

Here you can see we are creating an App component that uses a useState hook.

But the hook is not defined. So let’s define that first.

const useState =(initialState = undefined) => {

  let state = initialState

  const setState = (newStateValue) => {
    state = newStateValue
  }

  return [state , setState ]
}

Here, we are taking a simple function that accepts an initial state.