React Hooks vs. Components: Picking the Right Approach

In the React ecosystem, developers often face a critical decision: should they use React hooks or stick with traditional React components for their projects? This question has become increasingly relevant since the introduction of hooks in React 16.8, which brought a paradigm shift in how we build React applications.

As a developer who has worked extensively with both React hooks and class components across numerous production applications, I'll share my insights on when to use each approach, helping you make informed architectural decisions for your next project.

Understanding the Fundamentals

What are React Components?

React components are the building blocks of any React application. They come in two main flavors:

1. Class components: These ES6 classes can access React's lifecycle functions and extend React.Component.

2. Functional components: These JavaScript routines return React items after accepting props.

Class components were the exclusive means of managing state and utilizing lifecycle methods in React applications before the introduction of hooks. Functional components were primarily used for simpler, stateless UI elements.

What are React Hooks?

React hooks are JavaScript functions that enable functional components to "hook into" React state and lifecycle elements. They let you utilize React's state and other capabilities without having to write a class component.

The most commonly used React hooks include:

• useState: For managing local state in functional components

• useEffect: For handling side effects like data fetching and subscriptions

• useContext: For consuming context in functional components

• useReducer: For managing more complex state with a reducer function

• useRef: For persisting values between renders without causing re-renders

• useCallback and useMemo: For optimizing component performance

Let's visualize the relationship between these concepts:

Class Components vs. Functional Components with Hooks

Class Components: The Traditional Approach

Class components have been the backbone of React for years. They provide a structured way to implement complex UI logic with full access to React's lifecycle methods.

Here's an example of a counter component implemented as a class component:

1import React from 'react';
2
3class CounterComponent extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {
7      count: 0
8    };
9    this.increment = this.increment.bind(this);
10  }
11
12  increment() {
13    this.setState(prevState => ({
14      count: prevState.count + 1
15    }));
16  }
17
18  componentDidMount() {
19    console.log('Counter component mounted');
20  }
21
22  componentDidUpdate(prevProps, prevState) {
23    if (prevState.count !== this.state.count) {
24      console.log('Count updated to:', this.state.count);
25    }
26  }
27
28  componentWillUnmount() {
29    console.log('Counter component will unmount');
30  }
31
32  render() {
33    return (
34      <div>
35        <h2>Count: {this.state.count}</h2>
36        <button onClick={this.increment}>Increment</button>
37      </div>
38    );
39  }
40}
41
42export default CounterComponent;

​

Advantages of Class Components:

1. Clear lifecycle methods: Class components provide distinct lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

2. Established patterns: Many existing codebases and examples use class components.

3. this.setState API: The setState method is well-documented and understood by most React developers.

Challenges with Class Components:

1. Verbose syntax: Class components often require more boilerplate code.

2. Binding issues: You need to bind methods to access 'this' within event handlers.

3. Logic reuse challenges: Patterns like higher-order components and render props can become complex when trying to reuse logic across multiple components.

Functional Components with Hooks: The Modern Approach

Functional components became more potent and adaptable with the advent of React hooks, which allowed them to leverage state and lifecycle capabilities.

Here's the same counter component implemented using functional components and React hooks:

1import React, { useState, useEffect } from 'react';
2
3function CounterComponent() {
4  const [count, setCount] = useState(0);
5
6  const increment = () => {
7    setCount(prevCount => prevCount + 1);
8  };
9
10  useEffect(() => {
11    console.log('Counter component mounted');
12
13    return () => {
14      console.log('Counter component will unmount');
15    };
16  }, []);
17
18  useEffect(() => {
19    if (count > 0) {
20      console.log('Count updated to:', count);
21    }
22  }, [count]);
23
24  return (
25    <div>
26      <h2>Count: {count}</h2>
27      <button onClick={increment}>Increment</button>
28    </div>
29  );
30}
31
32export default CounterComponent;

​

Advantages of Functional Components with Hooks:

1. Concise code: Functional components with hooks typically require less code than equivalent class components.

2. No 'this' keyword: You don't need to worry about binding methods or the 'this' context.

3. Better code organization: Related logic can be kept together through custom hooks rather than being split across different lifecycle methods.

4. Enhanced code reusability: Custom hooks allow for better separation of concerns and reuse of stateful logic across components.

Deep Dive: React Hooks in Action

The useState Hook

The useState hook is fundamental for managing state in functional components:

1import React, { useState } from 'react';
2
3function Counter() {
4  // Declare a state variable 'count' with an initial value of 0
5  const [count, setCount] = useState(0);
6
7  return (
8    <div>
9      <p>You clicked {count} times</p>
10      <button onClick={() => setCount(count + 1)}>
11        Click me
12      </button>
13    </div>
14  );
15}

​

The useState hook returns a pair: the current state value and a function to update it. Unlike the setState method in class components, useState doesn't automatically merge update objects - it replaces the state value with a new value.

The useEffect Hook

The useEffect hook allows you to perform side effects in functional components:

1import React, { useState, useEffect } from 'react';
2
3function DataFetchingComponent() {
4  const [data, setData] = useState(null);
5  const [loading, setLoading] = useState(true);
6
7  useEffect(() => {
8    const fetchData = async () => {
9      try {
10        setLoading(true);
11        const response = await fetch('<https://api.example.com/data>');
12        const result = await response.json();
13        setData(result);
14      } catch (error) {
15        console.error('Error fetching data:', error);
16      } finally {
17        setLoading(false);
18      }
19    };
20
21    fetchData();
22
23    // Cleanup function
24    return () => {
25      console.log('Component unmounting, cleanup happening here');
26    };
27  }, []); // Empty dependency array means this effect runs once after initial render
28
29  if (loading) return <div>Loading...</div>;
30  if (!data) return <div>No data found</div>;
31
32  return (
33    <div>
34      <h2>Data Results:</h2>
35      <pre>{JSON.stringify(data, null, 2)}</pre>
36    </div>
37  );
38}

​

The useEffect hook serves as a replacement for several lifecycle methods:

• It can mimic componentDidMount (empty dependency array)

• It can mimic componentDidUpdate (with dependencies)

• It can mimic componentWillUnmount (through the cleanup function)

Creating Custom Hooks

One of the most powerful features of React hooks is the ability to create custom hooks for reusing stateful logic across components:

1// useLocalStorage.js - A custom hook for persisting state to localStorage
2import { useState, useEffect } from 'react';
3
4function useLocalStorage(key, initialValue) {
5  // Get stored value from localStorage or use initialValue
6  const [storedValue, setStoredValue] = useState(() => {
7    try {
8      const item = window.localStorage.getItem(key);
9      return item ? JSON.parse(item) : initialValue;
10    } catch (error) {
11      console.log(error);
12      return initialValue;
13    }
14  });
15
16  // Update localStorage when state changes
17  useEffect(() => {
18    try {
19      window.localStorage.setItem(key, JSON.stringify(storedValue));
20    } catch (error) {
21      console.log(error);
22    }
23  }, [key, storedValue]);
24
25  return [storedValue, setStoredValue];
26}
27
28export default useLocalStorage;

​

Now you can use this custom hook in any functional component:

1import React from 'react';
2import useLocalStorage from './useLocalStorage';
3
4function PersistentForm() {
5  const [name, setName] = useLocalStorage('name', '');
6  const [email, setEmail] = useLocalStorage('email', '');
7
8  return (
9    <form>
10      <input
11        type="text"
12        value={name}
13        onChange={e => setName(e.target.value)}
14        placeholder="Name"
15      />
16      <input
17        type="email"
18        value={email}
19        onChange={e => setEmail(e.target.value)}
20        placeholder="Email"
21      />
22      <div>Form values will persist across page refreshes!</div>
23    </form>
24  );
25}

​

This example demonstrates how custom hooks can abstract complex logic and make it reusable across multiple components. The ability to create own custom hooks is one of the key advantages of the hooks approach.

When to Use Which Approach

Use Class Components When:

1. Working with legacy codebases: If you're maintaining or extending an existing application built with class components, it often makes sense to maintain consistency.

2. You need error boundaries: Currently, error boundaries can only be implemented using class components.

3. You prefer the clear separation of lifecycle methods: Some developers find the explicit lifecycle methods in class components easier to understand and debug.

4. Your team is more familiar with class-based patterns: If your team has stronger experience with class components, this might be a practical consideration.

Use Functional Components with Hooks When:

1. Starting new projects: For new React applications, functional components with hooks are generally recommended by the React team.

2. Building reusable logic: When you need to share stateful logic between components, custom hooks provide a cleaner solution than higher-order components or render props.

3. Working with simpler component state: Functional components with useState can make managing local state more straightforward.

4. You want to reduce bundle size: Functional components typically transpile to less code than class components.

5. You prefer a more functional programming style: Hooks align well with functional programming principles.

Let's visualize the decision-making process:

​

Performance Considerations

Component Performance with Hooks vs. Classes

When it comes to component performance, both approaches can be optimized effectively, but they use different techniques:

Class Components Performance Optimization:

• Use shouldComponentUpdate or extend React.PureComponent to prevent unnecessary re-renders

• Implement memoization patterns manually

Functional Components Performance Optimization:

• Use React.memo to wrap functional components

• Use useCallback to memoize event handlers

• Use useMemo to memoize expensive calculations

Here's an example of optimizing a functional component with React hooks:

1import React, { useState, useMemo, useCallback } from 'react';
2
3function ExpensiveCalculation({ items }) {
4  const [filter, setFilter] = useState('');
5
6  // Memoized expensive calculation
7  const filteredItems = useMemo(() => {
8    console.log('Filtering items...');
9    return items.filter(item =>
10      item.name.toLowerCase().includes(filter.toLowerCase())
11    );
12  }, [items, filter]); // Only recalculate when items or filter changes
13
14  // Memoized event handler
15  const handleFilterChange = useCallback((e) => {
16    setFilter(e.target.value);
17  }, []); // No dependencies, never recreated
18
19  return (
20    <div>
21      <input
22        type="text"
23        value={filter}
24        onChange={handleFilterChange}
25        placeholder="Filter items..."
26      />
27      <ul>
28        {filteredItems.map(item => (
29          <li key={item.id}>{item.name}</li>
30        ))}
31      </ul>
32    </div>
33  );
34}
35
36// Wrap with React.memo to prevent re-renders if props don't change
37export default React.memo(ExpensiveCalculation);

​

Real-world Examples and Best Practices

State Management Across the Component Tree

Managing state effectively is crucial in React applications. Both approaches offer solutions:

Class Components with Context API:

1// UserContext.js
2import React from 'react';
3
4const UserContext = React.createContext();
5
6class UserProvider extends React.Component {
7  state = {
8    user: null,
9    loading: false,
10    error: null
11  };
12
13  login = async (credentials) => {
14    try {
15      this.setState({ loading: true });
16      // API call logic here
17      const user = await loginAPI(credentials);
18      this.setState({ user, loading: false });
19    } catch (error) {
20      this.setState({ error, loading: false });
21    }
22  };
23
24  logout = () => {
25    // Logout logic
26    this.setState({ user: null });
27  };
28
29  render() {
30    return (
31      <UserContext.Provider
32        value={{
33          ...this.state,
34          login: this.login,
35          logout: this.logout
36        }}
37      >
38        {this.props.children}
39      </UserContext.Provider>
40    );
41  }
42}
43
44export { UserContext, UserProvider };

​

Functional Components with Hooks and Context:

1// UserContext.js
2import React, { createContext, useContext, useReducer } from 'react';
3
4const UserContext = createContext();
5
6const initialState = {
7  user: null,
8  loading: false,
9  error: null
10};
11
12function userReducer(state, action) {
13  switch (action.type) {
14    case 'LOGIN_START':
15      return { ...state, loading: true, error: null };
16    case 'LOGIN_SUCCESS':
17      return { ...state, user: action.payload, loading: false };
18    case 'LOGIN_FAILURE':
19      return { ...state, error: action.payload, loading: false };
20    case 'LOGOUT':
21      return { ...state, user: null };
22    default:
23      return state;
24  }
25}
26
27function UserProvider({ children }) {
28  const [state, dispatch] = useReducer(userReducer, initialState);
29
30  const login = async (credentials) => {
31    try {
32      dispatch({ type: 'LOGIN_START' });
33      // API call logic here
34      const user = await loginAPI(credentials);
35      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
36    } catch (error) {
37      dispatch({ type: 'LOGIN_FAILURE', payload: error });
38    }
39  };
40
41  const logout = () => {
42    dispatch({ type: 'LOGOUT' });
43  };
44
45  return (
46    <UserContext.Provider
47      value={{
48        ...state,
49        login,
50        logout
51      }}
52    >
53      {children}
54    </UserContext.Provider>
55  );
56}
57
58// Custom hook for using the user context
59function useUser() {
60  const context = useContext(UserContext);
61  if (context === undefined) {
62    throw new Error('useUser must be used within a UserProvider');
63  }
64  return context;
65}
66
67export { UserProvider, useUser };

​

The hooks approach allows you to extract the context logic into a custom hook (useUser), making it easier to use the context throughout your application.

Managing Side Effects

Handling side effects like data fetching is a common task in React applications:

Class Component Approach:

1class UserProfile extends React.Component {
2  state = {
3    user: null,
4    loading: true,
5    error: null
6  };
7
8  componentDidMount() {
9    this.fetchUserData();
10  }
11
12  componentDidUpdate(prevProps) {
13    if (prevProps.userId !== this.props.userId) {
14      this.fetchUserData();
15    }
16  }
17
18  async fetchUserData() {
19    try {
20      this.setState({ loading: true });
21      const response = await fetch(`/api/users/${this.props.userId}`);
22      const user = await response.json();
23      this.setState({ user, loading: false });
24    } catch (error) {
25      this.setState({ error, loading: false });
26    }
27  }
28
29  render() {
30    const { user, loading, error } = this.state;
31
32    if (loading) return <div>Loading...</div>;
33    if (error) return <div>Error: {error.message}</div>;
34    if (!user) return <div>No user found</div>;
35
36    return (
37      <div>
38        <h1>{user.name}</h1>
39        <p>Email: {user.email}</p>
40        {/* Other user details */}
41      </div>
42    );
43  }
44}

​

Functional Component with Hooks Approach:

1import React, { useState, useEffect } from 'react';
2
3function UserProfile({ userId }) {
4  const [user, setUser] = useState(null);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState(null);
7
8  useEffect(() => {
9    const fetchUserData = async () => {
10      try {
11        setLoading(true);
12        const response = await fetch(`/api/users/${userId}`);
13        const userData = await response.json();
14        setUser(userData);
15        setLoading(false);
16      } catch (error) {
17        setError(error);
18        setLoading(false);
19      }
20    };
21
22    fetchUserData();
23  }, [userId]); // Re-fetch when userId changes
24
25  if (loading) return <div>Loading...</div>;
26  if (error) return <div>Error: {error.message}</div>;
27  if (!user) return <div>No user found</div>;
28
29  return (
30    <div>
31      <h1>{user.name}</h1>
32      <p>Email: {user.email}</p>
33      {/* Other user details */}
34    </div>
35  );
36}

​

The useEffect hook consolidates the componentDidMount and componentDidUpdate logic into a single place, making the code more maintainable.

Integration with Other React Features

Using Hooks with React Router

React hooks integrate seamlessly with other React features and libraries like React Router:

1import React from 'react';
2import { useParams, useNavigate, useLocation } from 'react-router-dom';
3
4function ProductDetail() {
5  const { productId } = useParams();
6  const navigate = useNavigate();
7  const location = useLocation();
8
9  // Get query parameters
10  const searchParams = new URLSearchParams(location.search);
11  const variant = searchParams.get('variant');
12
13  const goBack = () => {
14    navigate(-1);
15  };
16
17  return (
18    <div>
19      <h1>Product Detail: {productId}</h1>
20      {variant && <p>Variant: {variant}</p>}
21      <button onClick={goBack}>Go Back</button>
22    </div>
23  );
24}

​

This example shows how React Router's hooks (useParams, useNavigate, useLocation) can be used alongside React's built-in hooks for a clean, functional approach to routing.

The Future: Hooks and Class Components Side by Side

According to the React docs and the React team, hooks are the future of React. However, class components are not deprecated and will be supported for the foreseeable future. Many existing codebases use class components, and there's no urgent need to migrate them all at once.

Gradual Migration Strategy

If you decide to migrate from class components to hooks, here's a pragmatic approach:

1. Start with new features: Implement new components using functional components with hooks.

2. Create custom hooks for shared logic: Extract common logic into custom hooks that can be used across your application.

3. Refactor simple components first: Begin by migrating simpler class components to functional components with hooks.

4. Keep complex class components until last: Leave the most complex class components until you're comfortable with hooks.

5. Use codemods for automated conversion: Tools like react-codemod can help automate parts of the migration process.

Making the Right Choice for Your Project

The debate around React hooks vs components isn't about picking a winner. It’s about choosing what works best for the project at hand.

Functional components with hooks offer a cleaner way to manage state and reuse logic. They match the direction React is heading and are a great choice for new projects.

Class components still have their place, especially in older codebases. They provide clear lifecycle methods and are useful for features like error boundaries.

For many teams, a mix of both approaches works best. Understanding their strengths helps in making smart choices. By keeping project needs and team experience in mind, developers can use the right approach while gradually moving toward a more hook-friendly future.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.