Make React useEffect hook not run on initial render

by

We can use the useRef hook to store any mutable value we like, so we could use that to keep track of if it’s the first time the useEffect function is being run.

If we want the effect to run in the same phase that componentDidUpdate does, we can use useLayoutEffect instead.

Example

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <ComponentDidUpdateFunction />,
  document.getElementById("app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. State not updating when using React state hook within setInterval
  3. Push method in React Hooks (useState)?
  4. Wrong React hooks behaviour with event listener
  5. How to call loading function with React useEffect only once
  6. How to use componentWillMount() in React Hooks?
  7. Is it possible to share states between components using the useState() hook in React?
  8. Updating and merging state object using React useState() hook
  9. componentDidMount equivalent on a React function/Hooks component?
  10. react useEffect comparing objects
  11. React useState hook event handler using initial state
  12. How do I update states `onChange` in an array of object in React Hooks
  13. React useEffect causing: Can’t perform a React state update on an unmounted component
  14. useEffect does not listen for localStorage
  15. setTimeout for this.state vs useState
  16. How does JavaScript mechanism behind react hooks work?
  17. What is useState() in React?
  18. Why need useRef and not mutable variable?
  19. React – useState – why setTimeout function does not have latest state value?
  20. Determine which dependency array variable caused useEffect hook to fire
  21. Updating state to the same state directly in the component body
  22. Proper way of using React hooks + WebSockets
  23. React hook useEffect runs continuously forever/infinite loop
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. React Hook “useEffect” is called conditionally
  26. TypeError dispatcher.useState is not a function when using React Hooks
  27. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment