Code Review: React Hooks

You

Can you review this useEffect hook for potential issues? ```javascript useEffect(() => { const data = fetchData(); setData(data); }, [userId]); ```

Assistant

I see a few issues with this useEffect hook:

Issues Found

1. Missing async/await

The fetchData() function appears to be async but you're not awaiting it:

javascript
useEffect(() => {
  const fetchAndSetData = async () => {
    const data = await fetchData();
    setData(data);
  };
  fetchAndSetData();
}, [userId]);

2. Missing cleanup

You should add a cleanup function to prevent state updates on unmounted components:

javascript
useEffect(() => {
  let isMounted = true;
  
  const fetchAndSetData = async () => {
    const data = await fetchData();
    if (isMounted) setData(data);
  };
  
  fetchAndSetData();
  
  return () => { isMounted = false; };
}, [userId]);

3. Error handling

Consider adding try/catch for error handling.

You

Great points! What about using AbortController instead?

Assistant

Excellent suggestion! AbortController is the modern approach:

javascript
useEffect(() => {
  const controller = new AbortController();
  
  const fetchAndSetData = async () => {
    try {
      const data = await fetchData({ signal: controller.signal });
      setData(data);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Fetch failed:', error);
      }
    }
  };
  
  fetchAndSetData();
  
  return () => controller.abort();
}, [userId]);

Benefits:

  • Actually cancels the network request
  • Native browser API
  • Works with fetch and many libraries

Press Enter to send, Shift + Enter for new line