Making a React.js useState hook using plain JavaScript

November 25, 2024 (4mo ago)

True understanding comes not from memorizing answers but from unraveling the 'why' behind the questions.

[— Muhammad Amri]

Hi folks, have you ever wondered how the useState hook in React works behind the scenes? I wanted to understand it better, so I decided to create my own version of useState using plain JavaScript. Here's what I came up with, and along the way, I'll explain how it works 🗿.

What is useState?

In React, useState is a powerful hook that lets us add state to functional components. It allows us to store and update values that change over time, like counters, input values, or toggles. But behind its simplicity lies an interesting mechanism that we can replicate with basic JavaScript.

Recreating useState

Here's the implementation of our custom useState:

function useState(defaultValue) {
  let value = defaultValue; // Initialize the state with a default value
 
  function getValue() {
    return value; // A function to get the current value
  }
 
  function setValue(newValue) {
    value = newValue; // Update the value with the new one
    render(); // Re-render the app when the state changes
  }
 
  return [getValue, setValue]; // Return an array with the getter and setter
}

Let me break it down:

  1. State Initialization
  • We start with a value variable that holds the initial state (defaultValue).
  1. Getter and Setter Functions

  • getValue returns the current state.

  • setValue updates the state and triggers the render function to update the UI.

    3.Returning State and Updater

  • We return both functions (getValue and setValue) in an array, so we can destructure them just like the React hook.

Using Our Custom useState

Here’s an example where we use this useState to manage a counter:

const [counter, setCounter] = useState(0);
 
const app = document.getElementById('app');
const incr = document.getElementById('increment');
 
incr.addEventListener('click', increment);
 
function render() {
  app.innerHTML = counter(); // Display the current state in the UI
}
 
function increment() {
  setCounter(counter() + 1); // Update state when the button is clicked
}
 
render(); // Initial render
  • Initial State: We start with counter set to 0.
  • Updating the State: Clicking the "increment" button calls the increment function, which updates the state using setCounter.
  • Re-rendering the UI: Each time the state updates, the render function is triggered, and the UI reflects the latest value.

Why Build This?

The idea here isn’t to replace React’s useState. Instead, it’s a way to demystify how state management works in React. By creating our own version, we gain a deeper understanding of:

  • How state is stored and updated.
  • Why re-rendering is essential when state changes.
  • The simplicity and power of React’s hooks.

Happy Coding! 😎

LinkedIn
X