🚀 Simplifying State Management in React with useReducer!

Mohammed Iliass Affani — Mon, 10 Feb 2025 14:51:50 +0000

When your React components get more complex, managing state with just useState can get messy. This is where useReducer shines! It’s great for handling more complex state logic.
🔹 Example: Managing a counter with useReducer

import { 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();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}

Why use useReducer?
🔄 Simplifies complex state logic
🔧 Makes state management predictable
🚀 Scales better with larger components
💡 Have you tried useReducer in your projects? Share your experience or any tips you have! 👇

Boost Your React Performance with useMemo

Mohammed Iliass Affani — Wed, 05 Feb 2025 21:36:21 +0000

🚀 Boost Your React Performance with useMemo!

We all know that React can re-render components unnecessarily, which can degrade performance. One way to optimize this is by using useMemo to memoize expensive calculations.

🔹 Why useMemo?
useMemo helps by caching the result of expensive functions, so they are recalculated only when necessary.

Example: Efficiently Calculating the Sum of an Array:

import { useMemo } from "react";

const numbers = [1, 2, 3, 4, 5];

const sum = useMemo(() => {
  console.log("Calculating sum...");
  return numbers.reduce((a, b) => a + b, 0);
}, [numbers]);

console.log(sum); // The sum is calculated only when numbers change!

Why use useMemo?
✅ Prevents unnecessary recalculations
✅ Improves component performance
✅ Helps in large-scale applications
💬 Have you used useMemo in your projects? Let me know how it helped you!

DEV Community: Mohammed Iliass Affani

🚀 Simplifying State Management in React with useReducer!

Boost Your React Performance with useMemo