Is it good Practice to Stringify Object for useState() Hook To Avoid Re-Rendering

Question

According to this and that question the spread operator seems to be used for updating an object managed in a useState hook.

I created a super simple example and found out, that even when the content of the object does not change, a re-render is triggered (which is clear, because the object changed):

import React from "react";

function useFriendStatus() {
  const [person, setPersonProps] = React.useState({name:'Mark',age:23});

  React.useEffect(() => {
    console.log("rerender");
    const interval = setInterval(() => {
      setPersonProps({...person});   //simply set the object again -> no content changed
      console.log('update');
    }, 1000);
    return () => clearInterval(interval);
  }, [person]);


  return person;
}

export default function App() {
  const person = useFriendStatus();

  return <div className="App">Hello World: {"" + person.name}</div>;
}

Here you see a screenshot from my profiler which shows that a re-rendering seems to be fired (even if the displayed name did not change):

I am wondering if this is a "good practice" as EVERYTHING seems to be re-rendered. Sometimes you get deeply nested objects from an API and breaking them down to super-simple non-object userState hooks is not possible.

Wouldn't it be better to Stringify everything?

import React from "react";


function useFriendStatus() {
  const [person, setPersonProps] = React.useState(JSON.stringify({name:'Mark',age:23}));

  React.useEffect(() => {
    console.log("rerender");
    const interval = setInterval(() => {
      const personCopy=JSON.parse(person);
      setPersonProps(JSON.stringify({...personCopy}));
      console.log('update');
    }, 1000);
    return () => clearInterval(interval);
  }, [person]);


  return person;
}

export default function App() {
  const person = JSON.parse(useFriendStatus());

  return <div className="App">Hello World: {"" + person.name}</div>;
}

How do you handle that in practice?

Dennis Vash · Accepted Answer · 2020-03-22T12:03:13.993

2

I created a super simple example and found out, that even when the content of the object does not change, a re-render is triggered (which is clear, because the object changed)

It has nothing to do with the "content" of the object, your component re-renderers because you create a shallow copy {...person} of an object (changing its reference).

On render phase React makes a shallow comparison with the previous state in order to decide if render will occur, and in javascript, {} === {} is always false.

the spread operator seems to be used for updating an object managed in a useState hook.

As the state should be treated as immutable it is common to use the spread operator to make a shallow copy.

"It should only re-render if the name property of the object changes"

It is common to just add a condition before calling setState:

React.useEffect(() => {
  const newPerson = { ...person }; // fetch from some source
  // or check if person.name !== newPerson.name
  if (!isEqual(person, newPerson)) {
    setPerson(newPerson);
  }
}, [person]);

edited Mar 22 '20 at 12:03

answered Mar 22 '20 at 11:44

Dennis Vash

50,196
9
100
118

It is clear for me "why" the re-rendering is executed but I want to know "how" I can prevent it... – user3579222 Mar 22 '20 at 11:47
@user3579222 [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) – awran5 Mar 22 '20 at 11:50
What is the expected behavior of your example? Using stringify for comparing strings is not the same as comparing objects – Dennis Vash Mar 22 '20 at 11:52
It should only re-render if the name property of the object changes – user3579222 Mar 22 '20 at 11:53
I updating the answer – Dennis Vash Mar 22 '20 at 12:05
So would you consider the stringify approach as an alternative or do you see any systematic drawbacks? – user3579222 Mar 22 '20 at 12:54
It depends on the situation, you should research about `stringify` performance – Dennis Vash Mar 22 '20 at 12:55

Is it good Practice to Stringify Object for useState() Hook To Avoid Re-Rendering

1 Answers1