How does React State with json arrays affect performace

Question

I am learning react and I am building an application that has a json array in a state variable. Since react doesn't seem to re-render the page of a json array state variable with out making a copy of it first as mentioned here . Would it be more performant to just have a state variable that I can update anytime I want the page to re render. By doing this would I improve performance?

Example code making a hero tracking app

const Heroes = () => {
  const [MockData, setMockData] = useState(MData.Heros);

  const listHeroes = MockData.map((Hero) => (
    <li>
      <Tile Hero={Hero} />
    </li>
  ));

  const AddNewHero = () => {
    let newMockData = [...MockData];

    let length = newMockData.length + 1;

    let newhero = { name: name, id: length++ };

    newMockData.push(newhero);
    setMockData(newMockData);
  };

  return (
    <div>
      <h2>My Heroes</h2>
      <form>
        <p>Hero Name:</p>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </form>
      <button onClick={AddNewHero}>New Hero</button>
      {listHeroes}
      {/* <button onClick={sayHello}>Defasult</button>; */}
    </div>
  );
};

export default Heroes;

vs using updatePage stateChange to rerender the page.

import { useState } from "react";
import ReactDOM from "react-dom/client";
import { MockData } from "../Mockdata";
import Tile from "./Tile";

const Heroes = () => {
  const [name, setName] = useState("");
  const [updatePage, setUpdatePage] = useState(true);

  const listHeroes = MockData.Heros.map((Hero) => (
    <li>
      <Tile Hero={Hero} />
    </li>
  ));

  const AddNewHero = () => {
    let length = MockData.Heros.length + 1;
    let newhero = { name: name, id: length++ };
    MockData.Heros.push(newhero);
    setUpdatePage(!updatePage);
  };

  return (
    <div>
      <h2>My Heroes</h2>
      <form>
        <p>Hero Name:</p>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </form>
      <button onClick={AddNewHero}>New Hero</button>
      {listHeroes}
      {/* <button onClick={sayHello}>Defasult</button>; */}
      <div>{updatePage && ""}</div>
    </div>
  );
};

export default Heroes;

Since updateState is just a boolean would it be more efficient to update state like this?

Which of these would be more efficient and how can I test to see which one performs faster?

Answer 1

At a high level, both of your implementations are going to have the same performance. Whenever you add a new hero to your list, React still has to re-render that list by iterating over the array, so your time complexity is O(n). That fact doesn't change regardless of how you want to update the page.

Given that there is no way to avoid iterating over your list to re-render it after an update, I would suggest avoiding your second approach. useState(Data.heroes) is perfect for cases like this -- it will only trigger a re-render when the stateful value updates, and it handles that all by itself. Trying to control when the render happens is only adding additional complexity for you and future versions of yourself trying to maintain this code.

And, as unrelated advice, I'd recommend not worrying too much about performance when you're starting out on an app. Get it working first, then optimize it. Happy hacking! :)