Write a React hook that doesn't run on component mount

Magnificent Markhor answered on August 30, 2023 Popularity 1/10 Helpfulness 1/10

answer Write a React hook that doesn't run on component mount

Write a React hook that doesn't run on component mount

Comment

import { useEffect, useRef } from 'react';

function useCustomEffect(callback, dependencies) {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      // This block runs only on component mount
      isInitialMount.current = false;
    } else {
      // This block runs on updates after the initial render
      callback();
    }
  }, dependencies);
}

// Example usage of the custom hook
function MyComponent() {
  const [count, setCount] = useState(0);

  // Use the custom hook with a callback and dependencies
  useCustomEffect(() => {
    console.log('Effect ran on update, not on mount');
    // Add your custom logic here
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: hook javascript mount

Link to this answer
Share Copy Link

Contributed on Aug 30 2023

Magnificent Markhor

0 Answers Avg Quality 2/10

Write a React hook that doesn't run on component mount

Contents

More Related Answers

Write a React hook that doesn't run on component mount

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.