The useEffect Hook is used to perform side effects in a
functional component. Side effects are operations that happen outside
the normal process of calculating and displaying the component UI.
Common examples include loading data, setting up timers, subscribing to events, updating external systems and performing cleanup when a component is no longer being used.
useEffect Hook is imported from React and is normally
used inside functional components.
useEffect is a React Hook that lets a functional
component perform side effects after rendering.
import {
useEffect
} from 'react';It is commonly used when a component needs to interact with something outside its immediate rendering logic.
A side effect is an operation that interacts with something outside the component's returned UI.
Examples include:
Import useEffect from React.
import React, {
useEffect
} from 'react';If you also need state, you can import both Hooks together.
import React, {
useState,
useEffect
} from 'react';useEffect(() => {
// Side effect
}, []);The first argument is the effect function. The second argument is the dependency array.
useEffect(() => {
console.log(
'Effect executed'
);
});When no dependency array is provided, the effect runs after each completed render.
This behavior should be used carefully because an effect can run very frequently when the component renders often.
useEffect(() => {
console.log(
'Component effect'
);
}, []);An empty dependency array means the effect does not depend on changing values from the component. It runs after the initial mount.
useEffect(() => {
console.log(
'Count changed:',
count
);
}, [count]);
The effect runs after the initial render and when
count changes.
useEffect(() => {
console.log(
name,
age
);
}, [name, age]);
The effect reacts when either name or age
changes.
const [count, setCount] =
useState(0);
useEffect(() => {
console.log(
'Count:',
count
);
}, [count]);This is a common pattern when an effect needs to respond to state changes.
const [name, setName] =
useState('');
useEffect(() => {
console.log(
'Name changed:',
name
);
}, [name]);
Whenever name changes, the effect runs after rendering.
One common use of useEffect is loading data when a
screen starts.
useEffect(() => {
fetchData();
}, []);
The fetchData function can perform the required data
request.
const fetchData = async () => {
try {
const response =
await fetch(
'https://example.com/api/students'
);
const data =
await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
};The effect can call this function when the component needs to load data.
const [students, setStudents] =
useState([]);
useEffect(() => {
const loadStudents = async () => {
const response =
await fetch(
'https://example.com/api/students'
);
const data =
await response.json();
setStudents(data);
};
loadStudents();
}, []);The fetched data can be stored in state and displayed in the UI.
const [loading, setLoading] =
useState(true);
useEffect(() => {
const loadData = async () => {
try {
// Load data here
} finally {
setLoading(false);
}
};
loadData();
}, []);A loading state can be used to display an ActivityIndicator while data is being loaded.
An effect can be used to start a timer.
useEffect(() => {
const timer =
setTimeout(() => {
console.log(
'Timer finished'
);
}, 3000);
}, []);The timer starts when the effect runs.
Timers should be cleaned up when necessary.
useEffect(() => {
const timer =
setTimeout(() => {
console.log(
'Timer finished'
);
}, 3000);
return () => {
clearTimeout(timer);
};
}, []);The function returned by the effect is called the cleanup function.
An effect can return a cleanup function.
useEffect(() => {
// Setup
return () => {
// Cleanup
};
}, []);Cleanup is useful when an effect creates a subscription, timer, listener or another resource that needs to be released.
useEffect(() => {
const interval =
setInterval(() => {
console.log(
'Running...'
);
}, 1000);
return () => {
clearInterval(interval);
};
}, []);The cleanup function stops the interval.
Effects can be used to register event listeners and remove them during cleanup.
useEffect(() => {
const handleEvent = () => {
console.log(
'Event received'
);
};
// Add listener here
return () => {
// Remove listener here
};
}, []);An effect can be useful when the component needs to synchronize with something outside React.
Examples include:
The dependency array tells React which values are used by the effect and when the effect should be synchronized again.
useEffect(() => {
console.log(name);
}, [name]);
Here, name is a dependency of the effect.
No dependency array:
useEffect(() => {
// Runs after renders
});Empty dependency array:
useEffect(() => {
// Runs after initial mount
}, []);Dependency:
useEffect(() => {
// Runs after initial mount
// and when count changes
}, [count]);An effect can respond to a form value changing.
const [email, setEmail] =
useState('');
useEffect(() => {
console.log(
'Email changed:',
email
);
}, [email]);This can be useful for specific synchronization or derived external actions, although simple calculations are often better performed directly during rendering.
const [students, setStudents] =
useState([]);
useEffect(() => {
const loadStudents = async () => {
const response =
await fetch(
'https://example.com/api/students'
);
const data =
await response.json();
setStudents(data);
};
loadStudents();
}, []);The resulting state can then be provided to a FlatList.
Not every calculation needs useEffect.
For example, if a value can be calculated directly from existing state or props, it may not need an effect.
const fullName =
firstName + ' ' + lastName;Using an effect for every simple calculation can make component logic more complicated than necessary.
import React, {
useEffect,
useState
} from 'react';
import {
View,
Text,
FlatList,
ActivityIndicator,
StyleSheet
} from 'react-native';
export default function App() {
const [students, setStudents] =
useState([]);
const [loading, setLoading] =
useState(true);
const [error, setError] =
useState('');
useEffect(() => {
const loadStudents = async () => {
try {
setLoading(true);
setError('');
const response =
await fetch(
'https://example.com/api/students'
);
if (!response.ok) {
throw new Error(
'Request failed'
);
}
const data =
await response.json();
setStudents(data);
} catch (error) {
setError(
'Unable to load students'
);
} finally {
setLoading(false);
}
};
loadStudents();
}, []);
if (loading) {
return (
<View
style={styles.center}
>
<ActivityIndicator
size="large"
/>
<Text>
Loading...
</Text>
</View>
);
}
if (error !== '') {
return (
<View
style={styles.center}
>
<Text>
{error}
</Text>
</View>
);
}
return (
<View style={styles.container}>
<Text style={styles.title}>
Students
</Text>
<FlatList
data={students}
keyExtractor={
item => item.id.toString()
}
renderItem={({
item
}) => (
<View
style={styles.item}
>
<Text>
{item.name}
</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20
},
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 20
},
item: {
padding: 15,
borderWidth: 1,
borderColor: '#CBD5E1',
borderRadius: 8,
marginBottom: 10
}
});| Use Case | Purpose |
|---|---|
| API Requests | Load data from a backend |
| Timers | Start and clean up timers |
| Subscriptions | Subscribe and unsubscribe from external sources |
| Event Listeners | Register and remove listeners |
| External Synchronization | Synchronize with external systems |
| Storage | Read or synchronize external stored data when appropriate |
| State Changes | React to particular state changes when an external side effect is required |
Identify Side Effect
↓
Import useEffect
↓
Create Effect Function
↓
Add Required Dependencies
↓
Perform Side Effect
↓
Update State if Required
↓
React Re-renders
↓
Effect Runs When Dependencies Require It
↓
Clean Up Resources When Necessary
↓
Keep Effect Logic Organized
The useEffect Hook is important for handling side
effects in React Native applications. It is commonly used with API
requests, timers, subscriptions, event listeners and other external
operations.
useEffect is used for side effects.Question: What is the main purpose of the useEffect Hook?