🔄 Advanced Lifecycle Management

Production lifecycle patterns for complex applications.

Lifecycle State Machine Pattern

const STATES = {
  IDLE: "idle",
  LOADING: "loading",
  SUCCESS: "success",
  ERROR: "error"
};

function useAsyncData(fetchFn, dependencies) {
  const [state, setState] = React.useState(STATES.IDLE);
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    setState(STATES.LOADING);
    
    fetchFn()
      .then(result => {
        setData(result);
        setState(STATES.SUCCESS);
      })
      .catch(err => {
        setError(err);
        setState(STATES.ERROR);
      });
  }, dependencies);

  return { state, data, error };
}

function UserProfile({ userId }) {
  const { state, data, error } = useAsyncData(
    () => fetch(`/api/users/${userId}`).then(r => r.json()),
    [userId]
  );

  if (state === STATES.LOADING) return <div>Loading...</div>;
  if (state === STATES.ERROR) return <div>Error: {error.message}</div>;
  return <div>{data.name}</div>;
}

Lifecycle with Suspense

function useResource(resource) {
  const [data, setData] = React.useState(null);
  const [promise, setPromise] = React.useState(null);

  if (!data && !promise) {
    setPromise(
      resource.then(setData).catch(err => {
        console.error(err);
      })
    );
  }

  if (promise && !data) throw promise;
  return data;
}

// Usage with Suspense
function UserProfile({ userId }) {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <UserData userId={userId} />
    </React.Suspense>
  );
}

function UserData({ userId }) {
  const user = useResource(
    fetch(`/api/users/${userId}`).then(r => r.json())
  );
  return <div>{user.name}</div>;
}

Custom Lifecycle Hooks

function useDidMount(callback) {
  const ref = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) {
      ref.current = true;
      callback();
    }
  }, [callback]);
}

function useDidUpdate(callback, dependencies) {
  const isFirstRender = React.useRef(true);

  React.useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    callback();
  }, dependencies);
}

function useWillUnmount(callback) {
  React.useEffect(() => {
    return callback;
  }, []);
}

// Usage
function Example() {
  useDidMount(() => console.log("Mounted"));
  useDidUpdate(() => console.log("Updated"), []);
  useWillUnmount(() => console.log("Unmounting"));

  return <div>Example</div>;
}

Race Condition Prevention

function useSafeAsyncData(fetchFn, deps) {
  const [data, setData] = React.useState(null);
  const isMountedRef = React.useRef(true);

  React.useEffect(() => {
    isMountedRef.current = true;

    fetchFn().then(result => {
      if (isMountedRef.current) {
        setData(result);
      }
    });

    return () => {
      isMountedRef.current = false;
    };
  }, deps);

  return data;
}

✅ Key Takeaways

• Use **state machines** for complex lifecycle states

• Implement **Suspense** for data loading

• Create **custom hooks** for common patterns

• Prevent **race conditions** with mounted flag

• Combine **multiple techniques** for robust patterns