Currently, as I am delving into learning react, I find myself working on an application that involves a json array stored in a state variable. An interesting observation I made is that React does not trigger a re-render when there are changes to a state variable with a JSON array, unless a copy of it is created first, as discussed here. This led me to wonder if it would be more efficient to have a state variable that can be updated directly whenever I need the page to refresh. Would this approach enhance the performance of the application?
As an example, let's consider creating 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;
Alternatively, we could explore the option of using updatePage state change for re-rendering 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;
Considering that updateState only toggles between true and false, one might question if updating the state like this brings about efficiency gains.
So, which method would actually improve performance, and how do we determine which one performs better in practice?