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,
},
},
},
};
{
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}
/>
);
});
}
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);
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
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);
import { isEqual } from 'lodash';
export const compareProps = (prevProps, nextProps) =>
{
return isEqual(prevProps, nextProps);
};
import React from 'react';
const Test = (data) => {
console.log(data);
console.log('hallo from Test ----------------- ');
return <h1>I am an test </h1>;
};
export default React.memo(Test, compareProps);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.