React Lifecycle: Cleanup Functions

Medium

Determine console logs on mount and after button click. Question: What logs will appear on component mount and after clicking the button? Hints: • Cleanup functions run before re-running effect • useLayoutEffect cleanup runs before useEffect cleanup • Effect re-runs when dependencies change Acceptance Criteria: ✓ Correct logs on mount ✓ Correct logs after click ✓ Explanation of cleanup function order ✓ Understanding of useEffect dependencies

React Lifecycle: Cleanup Functions

Medium

Close file
Close file
import { useEffect, useLayoutEffect, useState } from 'react';

export default function App() {
  const [state, setState] = useState(0);

  useEffect(() => {
    console.log(state, 'Hack Frontend effect');

    return () => {
      console.log(state, 'Hack Frontend effect cleanup');
    };
  }, [state]);

  useLayoutEffect(() => {
    console.log(state, 'Hack Frontend layout effect');

    return () => {
      console.log(state, 'Hack Frontend layout cleanup');
    };
  }, [state]);

  return (
    <div>
      <button onClick={() => setState((prev) => prev + 1)}>
        click (current: {state})
      </button>
    </div>
  );
}

// Question 1: What logs appear on MOUNT?
// Your answer:
// 
// 
// Question 2: What logs appear after CLICK?
// Your answer:
// 
// 
// Explanation: ?

Preview

Console