Question

Technologies:

javascript

reactjs

react-native

Tolerim

a month ago

Reworded sentence: What are the effects of placing a component within a parent component?

As a senior JavaScript developer, I am often asked about how react rerendering and mount/unmount work, especially when defining a child functional component inside a parent functional component. It is clear that when the state of the parent component changes, the parent component must re-render. However, I am frequently asked:

"What happens with the child functional component defined inside of the parent when the parent is re-rendered? Does it get re-rendered or unmount and then mount again?"

To answer this question, I refer to the code presented below. A user reported that the focus was lost when typing in the text input. Interestingly, the author explains that the problem is related to the redeclaration of the child function when the Form function is re-rendered. I was confused about whether this meant that the child component was re-rendered or unmounted and mounted again. However, based on the author's suggested solution (to define the child component outside of the parent Form component), I concluded that redeclare means the child component gets re-rendered. To fix the focus issue, the author suggested passing {Input()} in the Form component or defining the child component outside of the parent Form component. Please check out the original article https://levelup.gitconnected.com/code-review-avoid-declaring-react-component-inside-parent-component-1768a645f523 for more details.

import { useState } from 'react';

const Form = () => {
  const [values, setValues] = useState(['', '']);

  const onChange = (value, index) => {
    const newValues = [...values];
    newValues[index] = value;
    setValues(newValues);
  };

  const Input = (props) => {
    return <input type='text' {...props} />;
  };

  return (
    <>
      {values.map((value, index) => (
        <Input
          key={index}
          value={value}
          onChange={(e) => onChange(e.target.value, index)}
        />
      ))}
      <button onClick={() => setValues([...values, ''])}>Add</button>
    </>
  );
};

Answers(2)

Tolerim

a month ago

When the parent component re-renders, the child functional component does get re-rendered as well, unless you take steps to prevent it. "Re-declared" in this context means that the child component is re-created (instantiated) with each render of the parent component. In the code example given, the Input component is defined inside the Form component, so it gets re-created with each re-render of the Form component, causing the input focus to be lost. To fix this, you can either pass the component itself () instead of re-declaring it with each render, or define the child component outside of the parent component, effectively "hoisting" it up.

Accepted Answer

Thank you for sharing your experience. When a parent component re-renders, React will also re-render all of its child components. In this case, the child component is re-rendered when the parent component is re-rendered because it is defined inside the parent component. This can cause performance issues if the child component is complex and has a lot of logic. Defining the child component outside of the parent component can help avoid these issues. I hope this helps! Let me know if you have any other questions.