#13 - useState vs Redux

State Management in React

2023-12-15

Hello, coding comrades!

Today, we talk about state management in React.

useState: Simplicity in Local State Mastery

`useState` is a React Hook introduced in version 16.8, designed for managing local state within functional components. It's the go-to choice for simpler applications or when state is confined to a specific component.

Example Usage:

import React, { useState } from 'react';

function Navbar() {
  const [userName, setUserName] = useState('Guest');

  return (
    <div>
      <nav>
        <p>Welcome, {userName}!</p>
      </nav>
      <input
        type="text"
        placeholder="Enter your name"
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
      />
    </div>
  );
}
lang-javascript

Pros:
1. User-Friendly: Lightweight syntax that's easy to comprehend.
2. Local Management: Ideal for component-specific state.
3. Native to React: No need for additional libraries.

Cons:
1. Component-Scoped: State is confined to the component, making sharing challenging.

`Redux`: Sovereign Global State Management

`Redux` is a robust state management library for React applications, offering a global store accessible by any component. It excels in larger applications with intricate state requirements.

Example Usage:

// store.js
import { createStore } from 'redux';

const initialState = {
  userName: 'Guest',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USERNAME':
      return { ...state, userName: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;
lang-javascript

Pros:

Global Reach: State can be shared across the entire application.
Controlled State Changes: Predictable state modifications through reducers.
Middleware Marvel: Supports middleware for advanced use cases.

Cons:

Boilerplate Overhead: Setting up actions, action types, and reducers can be verbose.
Learning Curve: Concepts might be daunting for beginners.

Choosing Wisely: A Practical Example

Let's delve into a real-world scenario where `useState` is used to manage the state of a username for a navbar.

Scenario:
You aim to manage the username for a navbar, ensuring it's accessible across various components.

Implementation:

1. Install Necessary Packages:

npm install react react-redux redux
lang-bash

2. Create `useState` in Your React App: `Navbar.js`: Implements a functional component using `useState` to manage the username.

3. Integrate `useState` into Your React App: `App.js`: Imports and utilizes the `Navbar` component, allowing the dynamic display of the username.

Conclusion:

In the grand saga of `useState` vs. `Redux`, there's no definitive champion. The selection hinges on your application's scale and intricacy. Embrace `useState` for localized simplicity and opt for the mighty `Redux` when facing the challenges of complex, global state requirements.

May your React endeavours be adorned with eloquent state management and impeccable coding!

Happy coding!
Ilia 🚀🔵

Back