useState
A hook that allows functional components to have stateful behavior.
const [state, setState] = useState(initialState);
useEffect
A hook that allows side effects to be performed in functional components.
useEffect(() => { /* effect code */ }, [dependency]);
State management
useState is used for managing stateful data within a functional component.
N/A
Side effect management
useEffect is used for performing side effects in functional components, such as fetching data, subscribing to events, or manipulating the DOM.
N/A
Usage
useState is used within a functional component to define and manage state.
useEffect is used within a functional component to define and manage side effects.
Parameters
useState accepts one parameter, the initial state value. It returns an array containing the current state value and a function to update that value.
useEffect accepts two parameters: a function containing the side effect code, and an optional array of dependencies that determine when the effect should be re-run.
State updates
State updates using useState replace the current state with a new state value.
State updates within an effect can be performed with setState or by manipulating external state.
Side effect dependencies
useState does not have dependencies.
useEffect can have dependencies, which determine when the effect should be re-run.
Execution order
useState is executed during rendering, before the return statement.
useEffect is executed after the first rendering and after every re-rendering that depends on its dependencies.
Cleaning up
useState does not require any cleanup.
useEffect can return a cleanup function, which is called before the effect is re-run or before the component unmounts.