What are React Hooks? Can you explain useState and useEffect with examples?

Understand how useState and useEffect simplify React component logic and replace lifecycle methods.

intermediateState lifecyclereacthooksuseStateuseEffectfunctional components
Published: Oct 26, 2025

React Hooks let you use state and lifecycle features without writing class components.


đź§  useState Example

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

âś… useState manages internal state within a functional component.

⚙️ useEffect Example

useEffect(() => {
  console.log('Component mounted or updated');
  return () => console.log('Cleanup on unmount');
}, [count]);

âś… Replaces componentDidMount, componentDidUpdate, and componentWillUnmount.

Frequently Asked Questions

Can I use hooks inside class components?

No, hooks only work inside functional components.

What triggers useEffect?

It runs after every render by default, but can be controlled via the dependency array.

Advertisement


Stay Updated

Get the latest frontend challenges, interview questions and tutorials delivered to your inbox.

Advertisement