If you’re new to React or have experience with class components, you may have heard that hooks have brought significant changes to the way React applications are developed.
Early in React’s history, class components were the standard approach., class components were everywhere. Managing state, dealing with lifecycle methods like componentDidMount, and passing data using context often felt confusing and repetitive. With the introduction of hooks, React development became simpler and cleaner.
In this blog, I want to walk you through the basics of four important hooks:
- useState
- useEffect
- useRef
- useContext
For each hook, I’ll show you what code looked like before hooks (using classes) and how much easier it is with hooks. I’ll also explain the pain points and benefits from my perspective.
1. useState: Managing Local Component State
Let’s start with the most used hook - useState.
Without Hooks (Class Component)
With Hook: useState (Function Component)
- You had to use
this.state,this.setState, and bind functions.- Even for small components, you needed a class.
- State logic wasn’t reusable.
- Much cleaner and easier to read.
- No more dealing with
this.- You can manage multiple states independently in one component.
2. useEffect: Doing Side Effects (e.g. API Calls, Timers)
When your component needs to fetch data, set up a timer, or do something after render - you use useEffect.
Without Hooks (Class Component)
With Hook: useEffect(Function Component)
- You had to spread your logic across multiple lifecycle methods.
- It was hard to keep related logic together.
- Cleanup code (like stopping a timer) was messy.
- Everything lives in one place.
- Cleanup is easy with the return function.
- Execution is controlled by specifying dependencies in the array.
3. useRef: Getting a Reference to a DOM Element or Persistent Value
If you’ve ever needed to directly access an input field or persist a value between renders without triggering a re-render — useRef is the way to go.
Without Hooks (Class Component)
With Hook: useRef (Function Component)
What Was Hard Without Hooks:
- You needed constructors and had to manage refs manually.
- It made the component more complex.
Why useRef is Better:
- You can declare and use it easily in functional components.
- It’s perfect for keeping mutable values around without causing re-renders.
4. useContext: Accessing Global Data Easily
When you want to pass down data (like theme or user info) to deeply nested components, useContext is your friend.
Without Hooks (Class Component)
const ThemeContext = React.createContext('light');
class ThemedButton extends React.Component { static contextType = ThemeContext;
render() { const theme = this.context; return <button style={{ background: theme === 'dark' ? '#333' : '#eee' }}> Theme: {theme} </button>; }}
With Hook: useContext (Function Component)
What Was Hard Without Hooks:
- You had to use
static contextType.- It wasn’t easy to use multiple contexts at once.
- More boilerplate.
Why useContext is Better:
- Just call useContext in any functional component.
- Clean and simple syntax.
- Great for global state like auth, theme, user, etc.
Final Thoughts
Hooks made React fun again. No more fighting with this, long lifecycle methods, or confusing state logic.
For those new to hooks, it is recommended to start by gradually converting class components to functional components using hooks. As familiarity with hooks increases, many developers find them to be a more efficient and maintainable approach to building React applications.
