Publish to my blog (weekly)

• A Complete Guide to useEffect — Overreacted

  • Instead, fix the problem at its source. For example, functions can cause this problem, and putting them inside effects, hoisting them out, or wrapping them with useCallback helps.
  • To avoid recreating objects, useMemo can serve a similar purpose.

• The last guide to the useEffect Hook you’ll ever need - LogRocket Blog

  • Hooks can only be invoked from the top-level function constituting your functional React component.
  • Hooks may not be called from nested code (e.g., loops, conditions, or another function body).
  • Custom Hooks are special functions, however, and Hooks may be called from the top-level function of the custom Hook. In addition, rule two is also true.
  • According to the React Docs, you have to include all values from the component scope that change their values between re-renders.
  • I want to emphasize that cleanup functions are not only invoked before destroying the React component. An effect’s cleanup function gets invoked every time, right before the execution of the next scheduled effect.
  • prev => prev + 1
  • , []);
  • In this context, the latter approach is a tiny performance optimization because we reduce the number of cleanup function calls.
  • { interval }
  • interval
  • interval={interval}
  • Sure, the state of the EffectsDemoProps changes, and this component is rendered along with its child components.
  • On button click, the numberClicks state of the EffectsDemoProps component gets changed, and the component is thus re-rendered.
  • This is because onDarkModeChange is defined inline of the component and gets recreated every time the component re-renders. So even if you use React.memo on the child components, they get re-rendered because the passed onDarkModeChange function prop points to another reference every time.
  • This is why it is crucial to understand the identity of values. In contrast to recreated primitive values like numbers, a recreated function points to another “cell” in memory. That’s why the function values differ.
  • We can fix this with the useCallback Hook.
  • const EffectsContext = React.createContext(null);
  • const { onDarkModeChange } = useContext(EffectsContext);
  • const onDarkModeChange = useCallback(() => {  return darkMode ? "
  • onDarkModeChange
  • <EffectsContext.Provider value={{ onDarkModeChange }}>
  • </EffectsContext.Provider>

• React useLayoutEffect vs. useEffect with examples - LogRocket Blog

  • “the signature is identical to useEffect, but it fires synchronously after all DOM mutations”.
  • Step 5. Only after the browser has painted the DOM change(s) is the useEffect function fired
  • “the function passed to useEffect will run after the render is committed to the screen”.
  • useLayoutEffect doesn’t really care whether the browser has painted the DOM changes or not. It triggers the function right after the DOM mutations are computed.
  • updates scheduled inside useLayoutEffect will be flushed synchronously before the browser has a chance to paint.
  • The useLayoutEffect function is triggered synchronously before the DOM mutations are painted.
  • the useEffect function is called after the DOM mutations are painted.
  • You’ll see how this time difference plays a huge role in use cases like animating the DOM,
  • With useLayoutEffect, the computation will be triggered before the browser has painted the update

• Hooks Cheatsheet

  • To prevent the user from seeing flickers of changes, you may use useLayoutEffect.
  • The function passed to useLayoutEffect will be run before the browser updates the screen.

• You are 0 years old!

  • The only difference here is that someValue is an object NOT a string.
  • const someValue = useMemo(() => ({ value: "someValue" }))

• Hooks Cheatsheet

  • This is ideal when the state update depends on some previous value of state.

• React Hooks cheat sheet: Best practices with examples - LogRocket Blog

  • If you find that useState/setState are not updating immediately, the answer is simple: they’re just queues.
  • Note that you have to pass the entire object to the useState updater function because the object is replaced, not merged.
  • //
  • { age: 19, siblingsNum: 4 }
  • setState({  ...state,  [val]: state[val] + 1  })
  • useEffect is passed an empty array, []. Therefore, the effect function will be called
  • only on mount
  • The function passed to useLayoutEffect will be run before the browser updates the screen.

• AJAX and APIs – React

  • Note: the empty deps array [] means
  • this useEffect will run once
  • similar to componentDidMount()

• 18. useCallback 를 사용하여 함수 재사용하기 · GitBook

  • 주의 하실 점은, 함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다는 것 입니다. 만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없습니다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야 해요.

Posted from Diigo. The rest of my favorite links are here.