Hey everyone,
I've been exploring React Hooks and wanted to share some insights on useState and useEffect, as they are fundamental to functional component development in modern React. These hooks allow us to manage state and side effects without writing class components.
useState Hook:
The useState hook is used for adding state to functional components. It returns a pair: the current state value and a function that lets you update it.
// Example usage:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // Initial state is 0
return (
You clicked {count} times
);
}
The key takeaway is that setCount will re-render the component with the new state.
useEffect Hook:
The useEffect hook lets you perform side effects in function components. Side effects include things like data fetching, DOM manipulation, subscriptions, or manually setting properties on the window object.
It's similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components combined, but it runs after every render by default. You can control when the effect runs by passing a second argument, an array of dependencies.
// Example usage:
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
// Cleanup function
return () => clearInterval(intervalId);
}, []); // Empty dependency array means this effect runs only once after the initial render
return (
Timer: {seconds}s
);
}
The cleanup function returned by useEffect is crucial for preventing memory leaks, especially when dealing with subscriptions or intervals.
Let's discuss your experiences and any tricky scenarios you've encountered with these hooks!