Personally I would avoid React.memo / React.useRef / React.useCallback. The simplest solution to your example is just create another component, and store the state with this. eg. const Button = () => { console.log(“Button Rendered!”); window.alert(“Button Rendered”); return <button onClick=””>Press me</button>; }; const TextInput = () => { const [textInput, setTextInput] = useState(“Hallo”); const onChangeInput … Read more
React does not allow you to do an early return prior to other hooks. If a component executes fewer hooks than a previous render, you will get the following error: Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. React can’t tell the difference between an early … Read more
There is a very simple theory to why you should use useMemo to memoize the values passed to the Context Provider. When you pass the value to Context Provider, either as an object or an array like: return <CountContext.Provider value={{state, setCount}} {…props} /> or return <CountContext.Provider value={[state, setCount]} {…props} /> What essentially happens is that … Read more
First of all, if you are looking for a conceptual explanation of how hooks work and how they know what component instance they are tied to then see the following: in depth article I found after writing this answer Hooks FAQ related StackOverflow question related blog post by Dan Abramov The purpose of this question … Read more
Combine slice reducers (combineReducers) The most common approach is to let each reducer manage its own property (“slice”) of the state: const combineReducers = (slices) => (state, action) => Object.keys(slices).reduce( // use for..in loop, if you prefer it (acc, prop) => ({ …acc, [prop]: slices[prop](acc[prop], action), }), state ); Example: import a from “./Reducer1”; import … Read more
As with any function, it can be exited early with return keyword. These two snippets are equivalent: React.useEffect(() => { if (foo){ // do something } }) React.useEffect(() => { if (!foo){ return; } // do something })
ESLint 8.0.0 comes with a breaking change for rules that provide suggestions. There is nothing you can put into your .eslintrc.js to make it work if you use rules that haven’t been updated to work after this change. What you can do: Use ESLint 7 until the plugin is updated to work with ESLint 8. … Read more
The recommendation for that is also on React Docs – Hooks API Reference. The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component. setState(newState); During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates. … Read more
I was including my component library (for that matter any library) in my application as @Janith did using my-comp-lib:”file:../..” (I don’t want to publish every time I want to test) and I encountered the same issue. Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen … Read more
componentDidMount Pass an empty array as the second argument to useEffect() to run only the callback on mount only. function ComponentDidMount() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log(‘componentDidMount’); }, []); return ( <div> <p>componentDidMount: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } ReactDOM.render( … Read more