Managing State in React: Local vs. Global – No-Fucking-Around Edition

Alright, buckle up—you’re about to dive into state management in React, and I’m not pulling any punches. Whether you’re dealing with local state in your component or need a full-blown global state management solution, here’s the real deal with practical examples. Let’s break this shit down.

Local State Management

1. useState: The Basic Building Block

For simple state needs, useState is your go-to. It’s perfect for handling local UI state in a component.

Example: Toggling a Button

import React, { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);
  
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

export default ToggleButton;

Why Use It?

• Super simple.
• Ideal for small, isolated state changes.

2. useReducer: When useState Just Isn’t Enough

For more complex state logic or when your state depends on previous states, useReducer is a beast.

Example: Counter with Complex Logic

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error('Unknown action');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

Why Use It?

• Better for managing complex state transitions.
• Centralizes state logic into one place.

3. useContext: Passing State Around (But Not a State Store)

useContext lets you share state between components without prop drilling. Remember, context isn’t a state store—it’s just a way to pass data down the tree.

Example: Theme Context

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>Toggle Theme</button>
    </div>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

Key Point:

• Context is great for passing down state, but it doesn’t handle complex state logic like a dedicated state management tool would.

Global State Management

When your app’s state needs to be accessible across multiple components and deeply nested trees, local state won’t cut it. Enter global state management.

1. Redux: The Classic Choice

Redux is the king for managing global state. It gives you a predictable state container, but let’s be honest—it can be a pain in the ass to set up.

Basic Redux Example with Redux Toolkit (RTK)

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1 },
    decrement: (state) => { state.count -= 1 }
  }
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

export default store;

// App.jsx
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store, { increment, decrement } from './store';

function Counter() {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

Why Use Redux?

• Centralized state management.
• Predictable state updates.
• Great for large-scale applications.

2. RTK Query: The Modern, Recommended Approach

RTK Query is part of Redux Toolkit—it simplifies data fetching and caching, reducing boilerplate and making your life much easier.

Example: Fetching Data with RTK Query

// apiSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts'
    })
  })
});

export const { useGetPostsQuery } = apiSlice;

// Posts.jsx
import React from 'react';
import { useGetPostsQuery } from './apiSlice';

function Posts() {
  const { data: posts, error, isLoading } = useGetPostsQuery();

  if (isLoading) return <div>Loading posts...</div>;
  if (error) return <div>Error fetching posts!</div>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;

Why Use RTK Query?

• Built-in caching and automated refetching.
• Reduces boilerplate compared to classic Redux.
• Officially recommended by Redux for data fetching.

Final Thoughts and Best Practices

• Local vs. Global:
  Use local state (with useState and useReducer) for component-specific data.
  Use global state (Redux, RTK Query) for data that needs to be shared across the app.
• Context Isn’t State:
  Don’t confuse useContext with a state management solution. It’s a way to pass data down the tree, not to manage complex state logic.
• Pick the Right Tool:
  If your app is small, local state and context might be enough.
  For larger applications, Redux with RTK Query offers a robust solution for both state management and data fetching.
• Practice Makes Perfect:
  Experiment with these methods in small projects. Get your hands dirty, break shit, fix it, and learn from it. There’s no substitute for real-world experience.

Keep your code clean, your state predictable, and your mind focused. Happy coding, and go crush those state management challenges like the badass developer you are!

Drop your thoughts or questions below—let’s talk about how you manage state in your projects and help each other level up.

And keep it mind you can always subscribe to my weekly newsletter