- Published on
Effects with React useEffect
Some practical examples of how to use the React useEffect() -
import React from 'react' export default function App() { const [name, setName] = React.useState('') const [age, setAge] = React.useState(0) React.useEffect(() => { console.log('component mounted') return () => { console.log('component unmounted') } }, []) // empty array means it will only run on mounting // Separation of concerns // This is a good example of how to separate concerns splitting into two useEffects to handle each value React.useEffect(() => { console.log('name changed', name) }, [name]) // only triggers when name changes React.useEffect(() => { console.log('age changed', age) }, [age]) // only triggers when age changes return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" value={age} onChange={(e) => setAge(e.target.value)} /> </div> ) }
On Mounting
Similar to the legacy componentDidMount
it will trigger on mounting the component:
React.useEffect(() => {
console.log('component mounted')
return () => {
console.log('component unmounted')
}
}, []) // empty array means it will only run on mounting
Read-onlyOn Changing Values
React.useEffect(() => {
console.log('name changed', name)
}, [name]) // only triggers when name changes
Read-onlySeparation of Concerns
Instead of watching two values at the same useEffect, like the following:
React.useEffect(() => {
console.log({ name, age })
}, [name, age])
Read-onlyThink in separation of concerns, and split each it will be cleaner and easier for the next person who need to read your code, eg:
// Separation of concerns
// This is a good example of how to separate concerns splitting into two useEffects to handle each value
React.useEffect(() => {
console.log('name changed', name)
}, [name]) // only triggers when name changes
React.useEffect(() => {
console.log('age changed', age)
}, [age]) // only triggers when age changes
Read-only