Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – What is the difference between destructuring and and just using properties in React

I have some problems regarding React code. Inside my App.jsx, I wrote the logic with and without the destructuring of an object I get from an jsx tag:


<input
   name="fName"
   placeholder="First Name"
   onChange={handleChange}
   value={fullName.fName}
/>
<input
   name="lName"
   placeholder="Last Name"
   onChange={handleChange}
   value={fullName.lName}
/>

Here is the code with destructuring way:


function handleChange(event) {
    const { name, value } = event.target;

    setFullName((preValue) => {
      if (name === "fName") {
        return {
          fName: value,
          lName: preValue.lName,
        };
      } else if (name === "lName") {
        return {
          fName: preValue.fName,
          lName: value,
        };
      }
    });
  }

While this is the code without destructuring way


function handleChange(event) {
    setFullName((preValue) => {
      if (event.target.name === "fName") {
        return {
          fName: event.target.value,
          lName: preValue.lName,
        };
      } else if (event.target.name === "lName") {
        return {
          fName: preValue.fName,
          lName: event.target.value,
        };
      }
    });
  }

Note that I tried to write the code with the same logic. However, while the former does work, in the latter way, my code doesn’t work and starts to crash showing this error:

TypeError
Cannot read properties of null (reading 'name')
eval
/src/components/App.jsx:11:23
   8 | 
   9 | function handleChange(event) {
  10 |   setFullName((preValue) => {
> 11 |     if (event.target.name === "fName") {
     |                     ^
  12 |       return {
  13 |         fName: event.target.value,
  14 |         lName: preValue.lName,

I expect it to work even when I do not use the destructuring

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out how my code does not work. It's because I'm working with React@16, and the mechanism behind event pooling is that it always refreshes the event every time the event handler is called. Here's the docs for reference: https://legacy.reactjs.org/docs/legacy-event-pooling.html


  2. 0

    This has nothing to do with destructuring. It’s only important, when you access the object.

    In the first snippet, the values name and value are copied before setFullName is called. In the second example, the object event is accessed after setFullName is called. The object is mutable and you get different behavior, if the object is modified before its values are read.

    const event = {
  target: {
    name: 'Name',
    value: 123
  }
}

function f1(event) {
  const { name, value } = event.target;
  g(() => { console.log(name, value); });
}

function f2(event) {
  g(() => { console.log(event.target.name, event.target.value); });
}

function g(f) {
  setTimeout(f, 10);
}

f1(event);
f2(event);
event.target.name = 'New name';
event.target.value = 321;

    Example:

    You can achieve the same behavior with and without desctructuring.

    const event = {
  target: {
    name: 'Name',
    value: 123
  }
}

function f1(event) {
  g(() => { 
    const { name, value } = event.target; 
    console.log(name, value);
  });
}

function f2(event) {
  const name = event.target.name;
  const value = event.target.value;
  g(() => { console.log(name, value); });
}

function g(f) {
  setTimeout(f, 10);
}

f1(event);
f2(event);
event.target.name = 'New name';
event.target.value = 321;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search