useEffect example

(Example shows browser API + useEffect hook)

  • Item #0 (keep scrolling)
  • Item #1 (keep scrolling)
  • Item #2 (keep scrolling)
  • Item #3 (keep scrolling)
  • Item #4 (keep scrolling)
  • Item #5 (keep scrolling)
  • Item #6 (keep scrolling)
  • Item #7 (keep scrolling)
  • Item #8 (keep scrolling)
  • Item #9 (keep scrolling)
  • Item #10 (keep scrolling)
  • Item #11 (keep scrolling)
  • Item #12 (keep scrolling)
  • Item #13 (keep scrolling)
  • Item #14 (keep scrolling)
  • Item #15 (keep scrolling)
  • Item #16 (keep scrolling)
  • Item #17 (keep scrolling)
  • Item #18 (keep scrolling)
  • Item #19 (keep scrolling)
  • Item #20 (keep scrolling)
  • Item #21 (keep scrolling)
  • Item #22 (keep scrolling)
  • Item #23 (keep scrolling)
  • Item #24 (keep scrolling)
  • Item #25 (keep scrolling)
  • Item #26 (keep scrolling)
  • Item #27 (keep scrolling)
  • Item #28 (keep scrolling)
  • Item #29 (keep scrolling)
  • Item #30 (keep scrolling)
  • Item #31 (keep scrolling)
  • Item #32 (keep scrolling)
  • Item #33 (keep scrolling)
  • Item #34 (keep scrolling)
🍍
  • Item #0 (keep scrolling)
  • Item #1 (keep scrolling)
  • Item #2 (keep scrolling)
  • Item #3 (keep scrolling)
  • Item #4 (keep scrolling)
  • Item #5 (keep scrolling)
  • Item #6 (keep scrolling)
  • Item #7 (keep scrolling)
  • Item #8 (keep scrolling)
  • Item #9 (keep scrolling)
  • Item #10 (keep scrolling)
  • Item #11 (keep scrolling)
  • Item #12 (keep scrolling)
  • Item #13 (keep scrolling)
  • Item #14 (keep scrolling)
  • Item #15 (keep scrolling)
  • Item #16 (keep scrolling)
  • Item #17 (keep scrolling)
  • Item #18 (keep scrolling)
  • Item #19 (keep scrolling)
  • Item #20 (keep scrolling)
  • Item #21 (keep scrolling)
  • Item #22 (keep scrolling)
  • Item #23 (keep scrolling)
  • Item #24 (keep scrolling)
  • Item #25 (keep scrolling)
  • Item #26 (keep scrolling)
  • Item #27 (keep scrolling)
  • Item #28 (keep scrolling)
  • Item #29 (keep scrolling)
  • Item #30 (keep scrolling)
  • Item #31 (keep scrolling)
  • Item #32 (keep scrolling)
  • Item #33 (keep scrolling)
  • Item #34 (keep scrolling)
🍍
  • Item #0 (keep scrolling)
  • Item #1 (keep scrolling)
  • Item #2 (keep scrolling)
  • Item #3 (keep scrolling)
  • Item #4 (keep scrolling)
  • Item #5 (keep scrolling)
  • Item #6 (keep scrolling)
  • Item #7 (keep scrolling)
  • Item #8 (keep scrolling)
  • Item #9 (keep scrolling)
  • Item #10 (keep scrolling)
  • Item #11 (keep scrolling)
  • Item #12 (keep scrolling)
  • Item #13 (keep scrolling)
  • Item #14 (keep scrolling)
  • Item #15 (keep scrolling)
  • Item #16 (keep scrolling)
  • Item #17 (keep scrolling)
  • Item #18 (keep scrolling)
  • Item #19 (keep scrolling)
  • Item #20 (keep scrolling)
  • Item #21 (keep scrolling)
  • Item #22 (keep scrolling)
  • Item #23 (keep scrolling)
  • Item #24 (keep scrolling)
  • Item #25 (keep scrolling)
  • Item #26 (keep scrolling)
  • Item #27 (keep scrolling)
  • Item #28 (keep scrolling)
  • Item #29 (keep scrolling)
  • Item #30 (keep scrolling)
  • Item #31 (keep scrolling)
  • Item #32 (keep scrolling)
  • Item #33 (keep scrolling)
  • Item #34 (keep scrolling)

useEffect

useEffect lets you synchronize a component with an external system (useEffect - React Docs).

  • - fetching data, connecting to server
  • - listening to global window event
  • - triggering animations (e.g. 3rd party libraries)
  • - tracking the visibility of an element (e.g. Intersection Observer API)
export default function Box() {
  const ref = useRef(null);

  useEffect(() => {
    const div = ref.current;

    // when component mounts, create an observer
    // the browser API notifies us when the element is visible
    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      if (entry.isIntersecting) {
        document.body.style.backgroundColor = 'orange';
      } else {
        document.body.style.backgroundColor = 'darkblue';
      }
    });

    observer.observe(div, {
      threshold: 1.0,
    });
    return () => {
      // when component unmounts, disconnect the observer
      observer.disconnect();
    };
  }, []);

  return (
    <div
      ref={ref}
      style={{
        height: 100,
        width: 100,
        // ...
      }}
    />
  );

🚀 Note

useEffect(() => {
// do something after mounting the component (e.g. connect to server, interact with browser API etc.)
}, [])


useEffect(() => {
  // run when state variable (e.g. counter) changes
}, [counter])