React Basics: useState and useEffect
React is a JavaScript library used to build user interfaces. Two important hooks in React are useState and useEffect.
1. useState
useState is used to store and update data in a component.
import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } export default Counter; Whenever the button is clicked, the count increases and the component re-renders.
2. useEffect
useEffect is used to run side effects, such as fetching API data or setting up event listeners.
import { useEffect } from "react"; useEffect(() => { console.log("Component mounted"); }, []); The empty dependency array [] means the effect runs after the component mounts.
Quick Summary
-
useState→ Stores and updates component state. -
useEffect→ Handles side effects. - React re-renders components when their state changes.
These two hooks are essential for building interactive React applications!
