Question

0

149

Views

How to tackle with React.memo by passing props as object?

parent Component has 3 objects

const [inputErr, setInputErr] = useState({
  email: {
    err: false,
    errMsg: '',
  },
  password: {
    err: false,
    errMsg: '',
  },
});

const [inputValue, setInputValue] = useState({
  email: '',
  // password: "",
});

const inputFunction = {
  email: {
    input: {
      func: {
        onChange: testFunc,
      },
    },
  },
};

Parent component is rendering child in map function like this

{
  inputs.map((el, i) => {
    const rules = el.rules;
    const err = inputErr[el.name];
    const input = {
      value: inputValue[el.name],
    };
    return (
      <Input
        name={el.name}
        placeholder={el.placeholder}
        input={input}
        rules={rules}
        err={err}
        func={testFunc}
        key={el.name}
      />
    );
  });
}

Child Component is just like this

import React from 'react';
const Test = (data) => {
  console.log(data);
  console.log('hallo from Test ----------------- ');
  return <h1>Iam an test </h1>;
};

export default React.memo(Test);

Problem

React.memo not working as it should because of this piece of code as what I have observed

const input = {
  value: inputValue[el.name],
};

So can anybody help me to fix this bug

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T10:45:53.639Z

React.memo works as expected.
With this code

const input = {
    value: inputValue[el.name],
};

you create a new object every time and therefore the Child component is updated.
In order for it not to be updated, you can pass a custom comparison function to the React.memo

function areEqual(prevProps, nextProps) {
    /*
        return true if passing nextProps to render would return
        the same result as passing prevProps to render,
        otherwise return false
    */
    return prevProps.input.value === nextProps.input.value;
}

import React from 'react';
const Test = (data) => {
    console.log(data);
    console.log('hallo from Test ----------------- ');
    return <h1>Iam an test </h1>;
};

export default React.memo(Test, areEqual);

0

149