Having nested Contexts will not cause any issues in your code. In the above case if you subscribe to UserContext in MenuContext, the MenuContext will only re-render when the UserContext has changed the value supplied to its provider. However unless the MenuContext changes the value it passes to the MenuContext Provider its children who are … Read more
Don’t worry about it Don’t worry about creating new functions on each render. Only in edge cases does that impede your performance. Setting onClick handlers are not one of those, so just create a new function on each render. However, when you need to make sure you use the same function every time, you can … Read more
While the answer by Kais will solve the symptoms, it will leave the cause unaddressed. It will also fail if there are multiple inputs – which one should autofocus itself on rerender then? The issue happens when you define a component (FormComponent) inside the scope of another function which is called each render of your … Read more
ESLint thinks you are defining a new component without setting any name to it. This is explained because ESLint cannot recognize the render prop pattern because you are not directly writing this render prop into a component, but into an object. You can either put the render prop directly into your jsx implementation of the … Read more
I encountered something like this recently (SO question here), and it seems like what you’ve come up with is a decent approach. You can add an arg to useEffect() that should do what you want: e.g. useEffect(() => { … }, [submitted]) to watch for changes in submitted. Another approach could be to modify hooks … Read more
Yes, your approach is correct. React hooks are not required to return anything. The React documentation states that: We don’t have to return a named function from the effect. We called it cleanup here to clarify its purpose, but you could return an arrow function or call it something different. The return value of a … Read more
Is it correct that this.setState in class components always cause a re-render, even when the new state value is identical to the previous? If you set a valid value apart from returning null within setState, a re-render will always be triggered by react in a class component unless your component is a PureComponent or you … Read more
useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks. The above statement is not trying to indicate that the setter returned by useState is being created newly on each update or render. What it means is that when you have a complex logic … Read more
I’m going to do my best to explain(or walk through) what is happening. I’m also making two assumptions, in point 7 and point 10. App component mounts. useEffect is called after the mounting. useEffect will ‘save’ the initial state and thus counter will be 0 whenever refered to inside it. The loop runs 3 times. … Read more
You could use a single useState with a default value of an object that contains all your input values and update that like you are used to with class components. Example const { useState } = React; function App() { const [state, setState] = useState({ email: “”, password: “” }); function onChange(event) { const { … Read more