Let's assume I have a parent component in which I am displaying a chart component. This chart component takes in a time series data and plots it if the data satisfies a certain criteria, if not it passes an error message to the parent through a errorMessage state handler passed by parent to child.

Now if the time series does not validate the condition then the child would update the errorMessage which would cause re-rendering of the child, and would again lead to child executing the code and again updating the errorMessage leading to infinite loop.

Two questions here:

1. Theoretically based on my understanding this should happen, however there is no infinite loop rendering when I try it on my machine
2. What is the best way to show these error messages, given the error message is being maintained by the parent and the error can occur in the child too

Refer to the pseudo-code below

const parent = () => {
  const [error,setError] = useState(null);
  return (
           <div>
               <Child data={[[1,2],[3,4],[4,5]]} one rror={setError}/>
                <ErrorDisplay error={error}/>
           </div> );  
}

const child = ({data, one rror}) => {
  if (!someCondition(data))
         one rror("There is some error")
  return (
           <Chart data={data}/>
 
);}

CodePudding user response：

The reason you do not experience the loop is because of

Bailing out of a state update

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

CodePudding user response：

As Gabriele Petrioli points out, provided nothing else changes, you won't be in an endless cycle because a state update that changes to exactly the same value doesn't cause a re-render. But by default you'd still get the child doing the work twice (once to find the error, then again when the parent re-renders to show the error and the child gets called again).

There are at least a couple of ways to avoid that duplication:

1. Hold the error state in Child, not Parent, and don't recompute error if data is unchanged.

2. Memo-ize the Child so the function doesn't get called again when its props haven't changed.

Here's a version of #2 that relies on array identity (that is, it won't run Child again if the same array is provided to it):

const Child = React.memo(({data, one rror}) => {
    if (!someCondition(data)) {
        one rror("There is some error")
        return null; // Or whatever
    }
    return (
        <Chart data={data}/>
    );
});

A more defensive version could check to see whether the new array is equivalent to the previous one, even if they aren't the same array:

const childPropsAreEqual = (prevProps, currProps) => {
    // Where `deepEquals` is a function that does a deep equivalence
    // check on the array
    return deepEquals(prevProps.data, currProps.data);
};
const Child = React.memo(({data, one rror}) => {
    if (!someCondition(data)) {
        one rror("There is some error")
        return null; // Or whatever
    }
    return (
        <Chart data={data}/>
    );
}, childPropsAreEqual); // <== Note providing an "are equal" function