Raji's code challenge

[RajiDurai]

Requirement:

(Problem statement) To identify rendering issues on a counter problem where:

1. The one affects both the Parent and the Child component
2. The one just affects the Child

Analysis:

I started by breaking down the code on what it does:

ParentComponent

• Receives a childTitle prop from its parent (the App component)
• Uses the useState hook to create a state variable value initialized to 0, and an setValue function to update it.
• Uses the useMemo hook to memoize the childTitle prop, so it's only recreated when childTitle changes.
• Renders
  • A <h1> heading showing the current value state.
  • A <ChildComponent> with the memoized childTitle as its title prop.
  • A button that increments the value state when clicked.

Child Component

• Receives a title prop from its parent (the ParentComponent).
• Renders
  • <h1> heading showing the received title.

App

• Renders a single <ParentComponent> with a childTitle prop set to "Child Component"

  Troubleshooting steps outlined

  1. I have started GitHub issues on each problems that I planned to work on, added notes and tracked my progress using it. Please refer here for my activities incolved: https://github.com/RajiDurai/Counter_React/issues
  2. Have added console.log on each component to see basically how rendering is done and what's the line of execution.
  3. Have set up React Dev tools and recorded using Profiler to see how, when, why the component is rendering.
  4. Analysed the components by setting breakpoints in code as well as Components in dev tools.
  5. Planned to use Jest for testing the components but had set up issues. If more time is given, can work on writing test cases and test all the components.

Issues identified

Issue category No.1 (affects both parent and child)

Issue: The parent and child components are rendered twice on very button click. Root Cause: The app is using a strict mode in index.js. Solution: Removed strict mode so that parent and child are rendered once(though strict mode is useful for debugging in developer environment)

Other possible issues on parent that might cause rendering issues:

• 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.

Issue category No.2 (affects child)

Issue: The child is re-rendered every time when parent state changes(i.e when the button is clicked). Root cause: As the parent state changes on usestate hook, all the children re-renders by default. Solution: Use React.Memo on child component like const ChildComponent = React.memo(({title}) => { to cache the child component. This means the child will only re-render when its props change, effectively preventing unnecessary renders. In our case, the title component is not changing.

Other observations: I don't see the child component so useful here as it's just a span displaying a constant string Child Component. May be the problem can be extended to pass props to the child to display more dynamic info like "no of clicks" on child component and compute heavy operations using a callback function.

Resources used:

React dev developer way Medium stack overflow