Prevent rerenders for objects with React.memo, useCallback, useMemo

Question

Prevent rerenders for primitive values works fine (React.memo) but problem starts when I try pass object to child component. I tried use useMemo and useCallback but with no success. Only solution that works it to use JSON.srtingify() to pass data and then JSON.parse() in child component - but this solution looks hacky.

import React, {useState} from 'react';

const TextExample1 = ({name, surname, infoText}) => {
  console.log(infoText);
  return (
    <p>
      {infoText} {name} {surname}
    </p>
  );
};

const TextExample2 = React.memo(({name, surname, infoText}) => {
  console.log(infoText);
  return (
    <p>
      {infoText} {name} {surname}
    </p>
  );
});

const TextExample3 = React.memo(({data, infoText}) => {
  console.log(infoText);
  return (
    <p>
      {infoText} {data.name} {data.surname}
    </p>
  );
});

const TextExample4 = React.memo(({data, infoText}) => {
  console.log(infoText);
  const parsedData = JSON.parse(data);
  return (
    <p>
      {infoText} {parsedData.name} {parsedData.surname}
    </p>
  );
});

const App = () => {
  console.log('----- NEW RENDER -----');
  const [forceRerenderNumber, setForceRerenderNumber] = useState(0);

  const sourceData = {
    name: 'Joe',
    surname: 'Moore',
  };

  return (
    <div>
      <TextExample1
        name="Joe"
        surname="Moore"
        infoText="1 - Works fine - intented rerenders :)"
      />
      <TextExample2
        name="Joe"
        surname="Moore"
        infoText="2 - Works fine - intented no rerenders. Rendered only onece :)"
      />
      <TextExample3
        data={sourceData}
        infoText="3 - Doesn't work fine - there are unintented rerendars :( How to stop it?"
      />
      <TextExample4
        data={JSON.stringify(sourceData)}
        infoText="4 - Works. - intented no rerenders. But JSON.stringify() and JSON.parse() looks like really hacky way. How to improve it?"
      />
      <Button
        onClick={() => {
          setForceRerenderNumber(forceRerenderNumber + 1);
        }}>
        Rerender
      </Button>
    </div>
  );
};

export default App;

Logs:

 LOG  ----- NEW RENDER -----
 LOG  1 - Works fine - intented rerenders :)
 LOG  2 - Works fine - intented no rerenders with primitive data. Rendered only onece :)
 LOG  3 - Doesn't work fine - there are unintented rerendars :( How to stop it?
 LOG  4 - Works. - intented no rerenders. But JSON.stringify() and JSON.parse() looks like really hacky way. How to improve it?
 LOG  ----- NEW RENDER -----
 LOG  1 - Works fine - intented rerenders :)
 LOG  3 - Doesn't work fine - there are unintented rerendars :( How to stop it?
 LOG  ----- NEW RENDER -----
 LOG  1 - Works fine - intented rerenders :)
 LOG  3 - Doesn't work fine - there are unintented rerendars :( How to stop it?

score -1 · Answer 1 · answered Jun 18 '21 at 13:16

If sourceData is a constant not change, you can put it outside the component:

const sourceData = {
  name: "Joe",
  surname: "Moore",
};

const App = () => {}

If sourceData can change, you can use useMemo:

const sourceData = useMemo(
    () => ({
      name: "Joe",
      surname: "Moore",
    }),
    []
  );

Prevent rerenders for objects with React.memo, useCallback, useMemo

1 Answers1