Here is the documentation for React.memo You can pass a function to control the comparison : const Modal = React.memo( props => {…}, (prevProps, nextProps) => prevProps.show === nextProps.show ); when the function returns true, the component will not be re-rendered
About useEffect hook: By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. more This means that function inside useEffect will be called after rendering of … Read more
I will provide an answer with a slightly different use case, but it will still answer your question. Motivation and Problem Statement Let’s consider following (similar to your genericSetLoadingCb) higher order function genericCb: const genericCb = React.useCallback( (param) => (e) => setState({ …state, [param]: e.target.value }), [] ); Say we use it in the following … Read more
I would recommend writing this as follows: const previousFooRef = useRef(props.foo); useEffect(() => { if (previousFooRef.current !== props.foo) { animateSomething(ref, props.onAnimationComplete); previousFooRef.current = props.foo; } }, [props.foo, props.onAnimationComplete]); You can’t avoid the complexity of having a condition inside the effect, because without it you will run your animation on mount rather than just when props.foo … Read more
Just to lay the groundwork: upon an action being dispatched, the selector you pass to useSelector() will be called. If the value it returns is different to the value returned last time an action was dispatched, the component will re-render. Destructing is indeed the wrong approach, but the top answer here is completely irrelevant. The … Read more
For both useMemo and useCallback (which is essentially just a special case of useMemo), if the second argument is an empty array, the value will be memoized once and always returned. If the second argument is omitted, the value will never be memoized, and the useCallback and the useMemo doesn’t do anything. Perhaps there’s some … Read more
There is not a React hook equivalent of componentDidCatch. However, the React team plans to add one soon. The React docs state: There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon. Read more: https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes
You can use the useEffect hook to run a function after every render when isEditing changed. In this function you can check if isEditing is true and focus the input. Example const { useState, useRef, useEffect } = React; const EditableField = () => { const [isEditing, setEditing] = useState(false); const toggleEditing = () => … Read more
The useRef hook can be used to store any mutable value, so you could store a boolean indicating if it’s the first time the effect is being run. Example const { useState, useRef, useEffect } = React; function MyComponent() { const [count, setCount] = useState(0); const isFirstRun = useRef(true); useEffect (() => { if (isFirstRun.current) … Read more
When using state from hooks, your test must ignore implementation details like state in order to properly test it. You can still make sure the component passes the correct state into its children. You can find a great example in this blog post written by Kent C. Dodds. Here’s an excerpt from it with a … Read more