React prevent unnecessary parent re-render when state updates using functional components - reactjs

Question

There are similar questions to this one available but they are either unanswered or use React class components. I am looking to use React functional components.
I have a parent component which is a webpage, it has two state parameters, the first holds a dataset and the second indicates if a modal is open. There are two child components, the first draws the data as an SVG. The second is a modal, which is used to show a form that can update the data.
My aim is that if I open the modal and edit some data, the SVG is redrawn. If I open the modal and close it again without editing data, the modal is not redrawn.
My issue is that the SVG is currently redrawn whenever the modal is open or closed, because the state of the modal is held in the parent, and updating any stateful parameter in the parent causes the it to re-render.
Here is a minimal example:
import React, { useState, useEffect } from 'react';
export function App(props) {
const [svgData, setSvgData] = useState("data");
const [show, setShow] = useState(false);
//Child that draws svgData
const SVG = () => {
useEffect(() => {
console.log("SVG got drawn");
}, [svgData]);
return (
<>
<p>The SVG</p>
</>
);
};
//Child modal. It would contain a form to update svgData
const Modal = () => {
console.log("modal showing: ", show);
return (
<button type="button" onClick={() => setShow(!show)}>
Click Me!
</button>
);
};
return (
<>
<SVG />
<Modal />
</>
);
}
Here is the working code in playcode.io
https://playcode.io/1166120
How can I update this code, so that the SVG only redraws if the data is updated, and not when the modal is updated?

Answer 1

You need to separate the child components and define them as their own FC otherwise they're seen as part of the parent and will get rerendered everytime the state changes. See the minimal change below.
import React, { useState, useEffect } from 'react';
//Child that draws svgData
function SVG(props) {
const { svgData } = props
useEffect(() => {
console.log("SVG got drawn");
}, [svgData]);
return (
<>
<p>The SVG</p>
</>
);
};
export function App(props) {
const [svgData, setSvgData] = useState("data");
const [show, setShow] = useState(false);
//Child modal. It would contain a form to update svgData
const Modal = () => {
console.log("modal showing: ", show);
return (
<button type="button" onClick={() => setShow(!show)}>
Click Me!
</button>
);
};
return (
<>
<SVG svgData={svgData} />
<Modal />
</>
);
}

Answer 2

This is the reason its better not to define components inside one another, have the child components defined outside with their respective state ....
Why ?? as on each update, the functions (components declared inside)
gets recreated and so it fires the useEffect ...
See the updated code here