A common technique for these situations is to lift the state up to the first common ancestor of all the components that needs to use the state (i.e. the PageComponent in this case) and pass down the state and state-altering functions to the child components as props. Example const { useState } = React; function … Read more
This is an interesting case that the useReducer examples don’t touch on. I don’t think the reducer is the right place to load asynchronously. Coming from a Redux mindset, you would typically load the data elsewhere, either in a thunk, an observable (ex. redux-observable), or just in a lifecycle event like componentDidMount. With the new … Read more
useState hooks function argument is being used only once and not everytime the prop changes. You must make use of useEffect hooks to implement what you would call the componentWillReceiveProps/getDerivedStateFromProps functionality import React,{useState , useEffect} from ‘react’; const Persons = (props) => { const [nameState , setNameState] = useState(props) useEffect(() => { setNameState(props); }, [props]) … Read more
After some time passed I’m sure it’s much easier to handle things by your own with setTimeout/clearTimeout(and moving that into separate custom hook) than working with functional helpers. Handling later one creates additional challenges right after we apply that to useCallback that can be recreated because of dependency change but we don’t want to reset … Read more
Yeah, this is a quirk of how the typings are written: function useRef<T>(initialValue: T): MutableRefObject<T>; function useRef<T>(initialValue: T|null): RefObject<T>; If the initial value includes null, but the specified type param doesn’t, it’ll be treated as an immutable RefObject. When you do useRef<HTMLInputElement>(null), you’re hitting that case, since T is specified as HTMLInputElement, and null is … Read more
You can use useEffect to access the latest state after updating it. If you have multiple state hooks and would like to track the update on only part of them, you can pass in the state in an array as the second argument of the useEffect function: useEffect(() => { console.log(state1, state2)}, [state1]) The above … Read more
The main difference between both is : useState causes re-render, useRef does not. The common between them is, both useState and useRef can remember their data after re-renders. So if your variable is something that decides a view layer render, go with useState. Else use useRef I would suggest reading this article.
useState setter doesn’t provide a callback after state update is done like setState does in React class components. In order to replicate the same behaviour, you can make use of the a similar pattern like componentDidUpdate lifecycle method in React class components with useEffect using Hooks useEffect hooks takes the second parameter as an array … Read more
How to update context with hooks is discussed in the How to avoid passing callbacks down? part of the Hooks FAQ. The argument passed to createContext will only be the default value if the component that uses useContext has no Provider above it further up the tree. You could instead create a Provider that supplies … Read more
The best way to go about such scenarios is to see what you are doing in the event handler. If you are simply setting state using previous state, it’s best to use the callback pattern and register the event listeners only on initial mount. If you do not use the callback pattern, the listeners reference … Read more