useEffect React and TypeScript

React + Typescript

Using useEffect in a React component with TypeScript involves ensuring that your effect functions, dependencies, and cleanup functions are properly typed. Here’s how you can do this:

Basic Example

Here's a simple example of using useEffect with TypeScript:

tsxCopy code
import React, { useEffect, useState } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    // Fetching data
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // Cleanup (if necessary)
    return () => {
      console.log('Cleanup if necessary');
    };
  }, []); // Dependency array

  return <div>Data: {data}</div>;
};

export default MyComponent;

Typing the State

When using state, you need to specify the type of the state variable. In the example above, useState<string | null> specifies that the state can be a string or null.

Example with Dependencies

If you have dependencies, you should also type them:

tsxCopy code
import React, { useEffect, useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Re-run the effect only if count changes

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

export default MyComponent;

Cleanup Function

Here’s an example with a cleanup function, typically used for subscriptions or timers:

tsxCopy code
import React, { useEffect, useState } from 'react';

const TimerComponent: React.FC = () => {
  const [seconds, setSeconds] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []); // Run once on mount and cleanup on unmount

  return <div>Seconds: {seconds}</div>;
};

export default TimerComponent;

Fetching Data with TypeScript

For data fetching, you can define the type of the data you expect:

tsxCopy code
import React, { useEffect, useState } from 'react';

interface Data {
  id: number;
  name: string;
}

const FetchDataComponent: React.FC = () => {
  const [data, setData] = useState<Data | null>(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then((data: Data) => setData(data))
      .catch(error => console.error(error));

    return () => {
      // Any necessary cleanup
    };
  }, []); // Empty dependency array ensures this runs once on mount

  return <div>{data ? `Name: ${data.name}` : 'Loading...'}</div>;
};

export default FetchDataComponent;

Handling Subscriptions

If you’re dealing with subscriptions, you can type the cleanup function appropriately:

tsxCopy code
import React, { useEffect, useState } from 'react';

const SubscriptionComponent: React.FC = () => {
  const [message, setMessage] = useState<string>('');

  useEffect(() => {
    const subscription = subscribeToMessages((newMessage: string) => {
      setMessage(newMessage);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []); // Empty array ensures the effect runs only once

  return <div>Message: {message}</div>;
};

function subscribeToMessages(callback: (message: string) => void) {
  // Dummy subscription function
  const interval = setInterval(() => {
    callback('New message received');
  }, 1000);

  return {
    unsubscribe: () => clearInterval(interval),
  };
}

export default SubscriptionComponent;

Summary

1. Type the state variables: Ensure that the state types are correctly defined.
2. Type the data: When fetching data, define the type of the data you expect to receive.
3. Type the cleanup function: Ensure that any cleanup functions are typed correctly.

By following these guidelines, you can effectively use useEffect in your TypeScript React components.