Stuck at React infinite loop

1

Hey guys,

I can’t seem to resolve an infinite loop issue. I’ve been stuck on this for 3 days. Can someone advice on how to solve this problem please?

I’m working on a daily-log app for my project. Let me explain the project in 3 components.

Annotation 2020-04-05 183909
Annotation 2020-04-05 1839091858×972 102 KB

The structure (from top to bottom)

  1. The DailyLog component has a form that uses Question components into which props are passed.
  2. The Question component uses the props to display a question and description. It also contains an Input component into which props are further passed down.
  3. The Input component takes the props and renders the appropriate form input field.

The logic (from bottom to top)

  1. The Input component handles it’s own inputState. The state is changed when the user inputs something and the onChangeHandler is triggered.
  2. The Input component also has a useEffect() hook that calls an onInput() function that was passed down as props from DailyLog.
  3. The onInputHandler() in the DailyLog component updates the formState which is the form-wide state containing all input field values. The formState is amended depending on which input field is filled at the time.
  4. The onInputHandler() uses the useCallback() hook which is supposed to stop an infinite loop caused by any parent/child re-renders. But it doesn’t work :frowning:

What’s wrong in the code? Please advice.

Thanks a lot!
Suraj

2

Answer solved here!