Discussion on: Beware of these traps on state and props management using react-hooks

View post

Replies for: Thanks for your feedback! Your explanation about splice and slice is totally right and is another way to solve the state update issue. I have been...

In the example, you are mutating the original array. The push method mutates the original array.

The reason why your example is working is that when you call updateComp, react triggers a re-render because there is a state change and thus your UI reflecting the changes to the array.

What you need to before updating an array is to make a copy of it so that you don't modify the original array. Then you can push/remove items in the clonedArray. and then you use the setValue method to update the value state. I reflected this in the code below using your example.

import React, { useState } from "react";
import "./styles.css";

function DisplayComp(props = {}) {
  // const [updateComp, doUpdateComp] = useState(false);
  const initialState = props.data; // that instantiation causes props to mutate
  // const initialState = [...props.data]; // that instantiation keeps props clean
  const [value, setValue] = useState(initialState);

  const handleClick = () => {
    const valueClone = [...value];
    valueClone.push((value[value.length - 1] || 1) * 2);
    setValue(valueClone)
    // doUpdateComp(!updateComp); // that line causes component to re-render
  };

  return (
    <div className="App">
      <h1>React Hooks state management</h1>
      <button onClick={handleClick}>Mutate</button>
      <p>Initial state value : {initialState.join(" ")}</p>
      <p>use state value : {value.join(" ")}</p>
    </div>
  );
}

export default function App() {
  return <DisplayComp data={[21]} />;
}