Removed strict mode so that parent and child are rendered once(though strict mode is useful for debugging in developer environment)
Removed className = "App" as it might cause rendering issue when the class is defined differently from not aligning with parent components. Also this prop is passed to the ParentComponent but not used. Instead, it uses another hardcoded className "Component".
Removed useMemo on childtitle as it is a string and memoization is not needed for static values that is not expected to change. i.e the ChildComponent only depends on the title prop from the parent and doesn't change when the value state updates.
Use React.Memo on child component like const ChildComponent = React.memo(({title}) => { rather than creating an additional "const Mchild = React.memo(ChildComponent);". This prevents child re-rendering whenever there is a change of state in parent and when parent renders again.
These are few rendering issues that I can find out so far. Also, I don't see the child component so useful here as it's just a span displaying a constant string Child Component. May be I can extend this problem and pass props to the child to display more dynamic info like "no of clicks" on child component.
Below are my observations:
Removed strict mode so that parent and child are rendered once(though strict mode is useful for debugging in developer environment)
Removed
className = "App"as it might cause rendering issue when the class is defined differently from not aligning with parent components. Also this prop is passed to the ParentComponent but not used. Instead, it uses another hardcoded className "Component".Removed
useMemoonchildtitleas it is a string and memoization is not needed for static values that is not expected to change. i.e the ChildComponent only depends on thetitleprop from the parent and doesn't change when the value state updates.Use
React.Memoon child component likeconst ChildComponent = React.memo(({title}) => {rather than creating an additional"const Mchild = React.memo(ChildComponent);". This prevents child re-rendering whenever there is a change of state in parent and when parent renders again.These are few rendering issues that I can find out so far. Also, I don't see the child component so useful here as it's just a span displaying a constant string Child Component. May be I can extend this problem and pass props to the child to display more dynamic info like "no of clicks" on child component.