Why isn't my Vanilla JS snippet for useState() working as expected? Let's delve into the theory behind the issue

Question

Why isn't my Vanilla JS snippet for useState() working as expected? Let's delve into the theory behind the issue

Exploring the realm of functional programming has brought me to the concept of closures, but I find myself struggling to fully grasp it. I've created a state closure resembling one used in React, I am aware of the correct solution to make the code snippet function as expected, however, the underlying theoretical principles remain elusive to me.

const useState = function () {
    let state: maze = {
        size: 0,
    };

    const setState = (newState) => {
        state = { ...newState };
    };

    const myStateObj = {
        state,
        setState,
    };

    return myStateObj;
};

const handleMazeSize = (e: InputEvent) => {
    const newMaze: maze = {
        size: Number((e.target as HTMLInputElement).value),
    };

    console.log(useState().state);
    console.log(useState().setState(newMaze));
    console.log(useState().state); // still size 0, expected the inputted size
};

Why is the modification not taking place?

javascript functional-programming state

Answer 1

Answer №1

Your code snippet has two main issues that need to be addressed:

Each time the change event is handled, a new state with a value of 0 is created. It is important to persist the state outside of the event handler.
The way the state property is exposed only returns a reference to the initial internal state object.

There are multiple solutions to these problems. In the modified code below:

The size property in the return object of useState has been replaced by a getter
useState is called once before attaching the event listener

const useState = function() {
  let state = {
    size: 0,
  };

  const setState = (newState) => {
    state = { ...newState };
  };

  const myStateObj = {
    get state() { return state; },
    setState,
  };

  return myStateObj;
};

const mazeState = useState();

const handleMazeSize = (e) => {
  const newMaze = {
    size: Number(e.target.value)
  };

  console.log("from:", mazeState.state);
  mazeState.setState(newMaze);
  console.log("to:", mazeState.state);
};

document.querySelector("input").addEventListener("change", handleMazeSize);

<input type="number" value="0">

One alternative solution for the second issue involves exposing the state object once and mutating it, rather than using a get method to retrieve the current internal value. However, this approach opens up the possibility of accidentally editing the internal state from external sources (e.g.

const { state } = useState(); state.foo = "bar"

).

const useState = function() {
  const state = {
    size: 0,
  };

  const setState = (newState) => {
    // Mutate the exposed object
    Object.assign(state, newState);
  };

  const myStateObj = {
    state,
    setState,
  };

  return myStateObj;
};

const mazeState = useState();

const handleMazeSize = (e) => {
  const newMaze = {
    size: Number(e.target.value)
  };

  console.log("from:", mazeState.state);
  mazeState.setState(newMaze);
  console.log("to:", mazeState.state);
};

document.querySelector("input").addEventListener("change", handleMazeSize);

<input type="number" value="0">

Answer 2

Your code snippet has two main issues that need to be addressed:

Each time the change event is handled, a new state with a value of 0 is created. It is important to persist the state outside of the event handler.
The way the state property is exposed only returns a reference to the initial internal state object.

There are multiple solutions to these problems. In the modified code below:

The size property in the return object of useState has been replaced by a getter
useState is called once before attaching the event listener

const useState = function() {
  let state = {
    size: 0,
  };

  const setState = (newState) => {
    state = { ...newState };
  };

  const myStateObj = {
    get state() { return state; },
    setState,
  };

  return myStateObj;
};

const mazeState = useState();

const handleMazeSize = (e) => {
  const newMaze = {
    size: Number(e.target.value)
  };

  console.log("from:", mazeState.state);
  mazeState.setState(newMaze);
  console.log("to:", mazeState.state);
};

document.querySelector("input").addEventListener("change", handleMazeSize);

<input type="number" value="0">

One alternative solution for the second issue involves exposing the state object once and mutating it, rather than using a get method to retrieve the current internal value. However, this approach opens up the possibility of accidentally editing the internal state from external sources (e.g.

const { state } = useState(); state.foo = "bar"

).

const useState = function() {
  const state = {
    size: 0,
  };

  const setState = (newState) => {
    // Mutate the exposed object
    Object.assign(state, newState);
  };

  const myStateObj = {
    state,
    setState,
  };

  return myStateObj;
};

const mazeState = useState();

const handleMazeSize = (e) => {
  const newMaze = {
    size: Number(e.target.value)
  };

  console.log("from:", mazeState.state);
  mazeState.setState(newMaze);
  console.log("to:", mazeState.state);
};

document.querySelector("input").addEventListener("change", handleMazeSize);

<input type="number" value="0">

Why isn't my Vanilla JS snippet for useState() working as expected? Let's delve into the theory behind the issue

Answer №1

Similar questions

What is the significance of the appearance of the letters A and J in the console for Objects?

Rendering JSON maps from MongoDB using Node.js

Is there a way to execute one function before another in JavaScript?

To avoid the sudden appearance of a div on the screen, React is programmed to wait for the

Find a way to incorporate social media features into a web application that functions intermittently

What is the best way to encode only a specific section of a JavaScript object into JSON format?

Enhancing the theme using material-ui@next and typescript

Resetting the form and validation in AngularJS post form submission

Guide to using Angular $resource to pass query parameter array

What is the best way to hide the next/previous tabs once the jQuery dataTable has been set up using jSON data

Exploring the process of implementing inheritance in TypeScript from a JavaScript class

Ways to implement time delays in For loops?

Sass is throwing an error message saying 'Module not found' during the compilation process

Obtain data from a popup window and transfer it back to the main parent window

Display the internal array of meteor in the template

Calculating the total sum of choices within select2

Tips on running a particular code following an AJAX request

function to choose in antd datepicker component

The execution of my code differs between running it locally and in online code editors like CodePen or Plunker

Guide to developing JavaScript code that moves information from one local website to a different one