Don't update child component - reactjs

Question

I have two children Components, when I onChange in first children, then the second children re render, I don't want to the second children re render. Online code example:
https://codesandbox.io/s/ji-ben-antd-4-24-0-forked-efg56l?file=/demo.tsx
const ChildA = (props: {
name: string;
changeValue: (key: string, value: any) => void;
}) => {
const { name, changeValue } = props;
return (
<Input
value={name}
onChange={(e) => {
changeValue("name", e.target.value);
}}
/>
);
};
const ChildB = (props: {
age: number;
changeValue: (key: string, value: any) => void;
}) => {
const { age, changeValue } = props;
console.log("==when I change name====, this component re-render");
return (
<InputNumber
value={age}
onChange={(e) => {
changeValue("age", e);
}}
/>
);
};
const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [saveValue, setSaveValue] = useState({
name: "wang",
age: 18
});
const showModal = () => {
setIsModalOpen(true);
};
const handleOk = () => {
// send value
console.log("====saveValue==", saveValue);
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
const changeValue = (key: string, value: any) => {
const newValue = JSON.parse(JSON.stringify(saveValue));
newValue[key] = value;
setSaveValue(newValue);
};
return (
<>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
>
<ChildA name={saveValue?.name} changeValue={changeValue} />
<ChildB age={saveValue?.age} changeValue={changeValue} />
</Modal>
</>
);
};
When I change the name ,I don`t want to Child B re-render
The actual situation is that there are many sub-components in a Modal. When you click OK, the value of the sub-component is obtained, saved and sent to the server. If you have good design component ideas, please share

Answer 1

I don't want to the second children re render.
Wrap ChildB with React.memo for a basic memoization.
const ChildB = memo(...);
Wrap the changeValue function with React.useCallback to persist the instance.
const changeValue = useCallback(...);
Slightly modify the changeValue function so it does not use the saveValue as a dependency.
setSaveValue((prev) => {
const newValue = JSON.parse(JSON.stringify(prev));
newValue[key] = value;
return newValue;
});
Codesandbox demo