useEffect React and TypeScript
Published: 2024-06-10 18:00:08

# 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:

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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.