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
- Type the state variables: Ensure that the state types are correctly defined.
- Type the data: When fetching data, define the type of the data you expect to receive.
- 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.
Top comments (0)