DEV Community: nakzyu

Common mistakes when using React - Why the screen value does not change

nakzyu — Sun, 05 Mar 2023 08:46:48 +0000

I guarantee that 99% of people who are new to React have been puzzled by the following phenomenon.

const Counter = () => {
  let counter = 0;
  return <button onClick={() => counter++}>{counter}</button>;
};

Why isn't the counter going up on the screen when you press the button?

Do you know why counter doesn't go up when you press the button after you have used useState?

So, how does React work fundamentally?

/* html */
<body>
  <div id="app"></div>
</body>;

/* js */
const $app = document.getElementById("app");
const jsx = <div>Hello</div>;
ReactDom.render(jsx, $app);

After receiving the JSX.Element, it is parsed into a pure HtmlElement, specified a specific HtmlElement, and renders the parsed value <div>Hello</div> under that HtmlElement.

To help understand it, here's what it looks like in Vanilla JS:

const $app = document.getElementById("app");
const $divElement = doucment.createElement("div");
$divElement.innerText = "Hello";
$app.appendChild($divElement);

Getting back on track, what will happen if you run the following code?

const $app = document.getElementById("app");
let jsx = <div>Hello</div>;
ReactDom.render(jsx, $app);
setTimeout(() => {
  jsx = <div>Nice to meet you</div>;
}, 3000); // Changes the value of jsx to <div>Nice to meet you</div> after 3 seconds

The answer is that the text displayed on the screen does not change from "Hello" to "Nice to meet you." The reason is the same as the counter example we started with.

Because...

It's because we didn't call ReactDom.render() again!

const $app = document.getElementById("app");
let jsx = <div>Hello</div>;
ReactDom.render(jsx, $app);
setTimeout(() => {
  jsx = <div>Nice to meet you</div>; // Changes the value of jsx to <div>Nice to meet you</div>
  ReactDom.render(jsx, $app); // Applies the changed value under $app again.
}, 3000);

If you call ReactDom.render() again in the timeout callback, the text on the screen will finally change to "Nice to meet you."

Now let's apply this to the counter example...

const Counter = () => {
  let counter = 0;
  return <button onClick={() => counter++}>{counter}</button>;
};

How can we apply it here?

Are you struggling with how to apply ReactDom.Render?

We don't actually need to import the ReactDom.Render function here.

const Counter = () => {
  const [counter, setCounter] = useState(0);
  return (
    <button onClick={() => setCounter((prev) => prev + 1)}>{counter}</button>
  );
};
const $app = document.getElementById("app");
ReactDom.render(<Clicker />, $app);

The setState function of the array returned by useState (in this case, setCounter) calls ReactDom.Render internally every time it is executed.

In summary...

The reason why the counter doesn't increment when the button is clicked in the initial Counter example is simple.

It's because we haven't actually manipulated the HtmlElement.

We need to parse the JSXElement into an actual HtmlElement using ReactDom.render and then render it on the DOM to see the value change on the screen.

React - Preventing Event Propagation from Parent Elements, Event Bubbling, Capturing, and Propagation

nakzyu — Sun, 05 Mar 2023 08:37:15 +0000

This topic is not directly related to React, but understanding Event Bubbling and Capturing in HTML and JS can be applied to React as well.

Suppose there is a component with a div tag as the parent and a button tag as the child rendered in the DOM, as shown below:

const Example = () => (
  <div
    onClick={(event) => {
      console.log("div clicked");
    }}
  >
    <button
      onClick={(event) => {
        console.log("button clicked");
      }}
    ></button>
  </div>
);

Event Capturing and Bubbling

When the button is clicked, JS handles event propagation as follows:

1 Starting from the top-level `Document`, it looks for the target of the `onClick` event one step at a time.

This process of finding the target is called Event Capturing.

2 After finding the `target`, it goes back up to the top-level `Document`.

This process of going back up is called Event Bubbling.
While going back up, if the event registered on the element (the target, which is either the button, div, body, or html) that triggered the Event Capturing, then it triggers all corresponding events in order.
Since the button has an event corresponding to the onClick event, "button clicked" is outputted to the console.
As it goes up, the parent of the button, which is the div, also has an event corresponding to the onClick event, so "div clicked" is outputted to the console.
There is no more output because body and html do not have any registered event for onClick.

How to Prevent Console Output from the Div? - `Event Propagation`

Events occur during the Event Bubbling Phase. If you stop this bubbling, you can prevent the event from being executed. This is called Event Propagation.

You can execute propagation by calling event.stopPropagation().

const Example = () => (
  <div
    onClick={(event) => {
      console.log("div clicked");
    }}
  >
    <button
      onClick={(event) => {
        event.stopPropagation();
        console.log("button clicked");
      }}
    ></button>
  </div>
);

If you propagate the button's event like in the above example, the event will no longer bubble up, and the div's onClick event will not be triggered.

React State - Avoiding Object Duplication

nakzyu — Sun, 05 Mar 2023 08:26:19 +0000

When developing on the client side of Web, there are many situations where we need to implement scenarios like:

When one item is selected in an array, the information related to that item must be displayed.

In this situation, let's look at how to avoid state duplication and errors.

Code Examples

const initialPeoples = [
  { name: "John", age: 20 },
  { name: "Jenny", age: 26 },
  { name: "Peter", age: 30 },
];

function AgeCounter() {
  const [peoples, setPeoples] = useState(initialPeoples);
  const [selectedPeople, setSelectedPeople] = useState(null);

  return (
    <>
      <ul>
        {peoples.map((people) => (
          <li
            key={people.name}
            onClick={() => {
              setSelectedPeople(people);
            }}
          >
            {people.name}, age {people.age}
          </li>
        ))}
      </ul>
      <button
        onClick={() => {
          setPeoples(
            peoples.map((people) => ({ ...people, age: people.age + 1 }))
          );
        }}
      >
        Happy New Year!
      </button>
      <div>
        selected people is: {selectedPeople?.name}, age {selectedPeople?.age}
      </div>
    </>
  );
}

The code above will work as follows:

Three objects that contain information about people exist in initialPeoples.
Displays information of those people below the <ul> tag.
When a specific person is clicked, the object corresponding to that person is saved in selectedPeople.
- Displays the selected selectedPeople information at the bottom of the screen.
When the Happy New Year! button is clicked, the age of the people increases by one.
- The age displayed in selectedPeople is also increased by one. At first glance, the code may seem fine, but there is an issue.

When John is selected and the Happy New Year! button is clicked, the age displayed in selectedPeople does not increase.

The reason for this is that the object saved in selectedPeople and the object I created by clicking the Happy New Year! button are different objects.

<button
  onClick={() => {
    setPeoples(peoples.map((people) => ({ ...people, age: people.age + 1 })));
  }}
>
  Happy New Year!
</button>

setState(setPeoples) does not operate by modifying some properties of the previous object with a pointer to the previous object within the rendering lifecycle, but always forces the creation of a new object.

By using the object creation reservation keyword {} in peoples.map((people) => ({ ...people, age: people.age + 1 })), a new object was saved in the new array created by map. Therefore, the age of the new object in the new array and the object in selectedPeople are not related at all, so clicking the Happy New Year! button does not increase the age.

This is also an anti-pattern that unnecessarily duplicates objects.

How can we modify it?

Replace the state named selectedPeople with a state named selectedPeopleName, which holds the unique name of a person as its value. Then declare selectedPeople as a regular variable and use it as follows:

const initialPeoples = [
  { name: "John", age: 20 },
  { name: "Jenny", age: 26 },
  { name: "Peter", age: 30 },
];

function AgeCounter() {
  const [peoples, setPeoples] = useState(initialPeoples);
  const [selectedPeopleName, setSelectedPeopleName] = useState(null);
  const selectedPeople = peoples.find(
    (people) => people.name === selectedPeopleName
  );

  return (
    <>
      <ul>
        {peoples.map((people) => (
          <li
            key={people.name}
            onClick={() => {
              setSelectedPeopleName(people.name);
            }}
          >
            {people.name}, age {people.age}
          </li>
        ))}
      </ul>
      <button
        onClick={() => {
          setPeoples(
            peoples.map((people) => ({ ...people, age: people.age + 1 }))
          );
        }}
      >
        Happy New Year!
      </button>
      <div>
        selected people is: {selectedPeople?.name}, age {selectedPeople?.age}
      </div>
    </>
  );
}

Now, even if you select John and press the Happy New Year! button, the age will increase properly.