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.
The structure (from top to bottom)
DailyLogcomponent has a form that uses
Questioncomponents into which props are passed.
Questioncomponent uses the props to display a question and description. It also contains an
Inputcomponent into which props are further passed down.
Inputcomponent takes the props and renders the appropriate form input field.
The logic (from bottom to top)
Inputcomponent handles it’s own
inputState. The state is changed when the user inputs something and the
Inputcomponent also has a
useEffect()hook that calls an
onInput()function that was passed down as props from
DailyLogcomponent updates the
formStatewhich is the form-wide state containing all input field values. The
formStateis amended depending on which input field is filled at the time.
useCallback()hook which is supposed to stop an infinite loop caused by any parent/child re-renders. But it doesn’t work
What’s wrong in the code? Please advice.
Thanks a lot!