DEV Community: shivam singh

Why It's Time to Ditch useState and Upgrade to useEasyState!

shivam singh — Thu, 29 Aug 2024 17:00:27 +0000

Custom React Hook: `useEasyState` 🎉

Let's dive into useEasyState, a custom React hook that streamlines state management. With this hook, you can handle state updates, resets, and more with minimal fuss. It’s a handy tool to keep your state management clean and straightforward, so you can spend less time on boilerplate code and more on building features.



export const useEasyState = <T = any>(defaultValue?: T) => {
  const [value, _set] = useState<T>(defaultValue);
  const valueRef = useRef<T>(defaultValue);
  valueRef.current = value;
  const [defaultState] = useState(defaultValue);
  const [touched, setTouched] = useState(false);
  const [dirty, setDirty] = useState(false);

  const set: Dispatch<SetStateAction<T>> = useCallback((...args) => {
    _set(...args);
    setDirty(true);
    setTouched(true);
  }, []);

  const eventHandler = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => set((e?.target?.value as any) || ""),
    [set]
  );
  const reset = useCallback(() => {
    setDirty(false);
    set(defaultState);
  }, [defaultState, set]);

  const clear = useCallback(() => {
    if (Array.isArray(defaultState)) return set([] as any);
    if (defaultState === null || defaultState === undefined)
      return set(defaultState);
    if (defaultState instanceof Date) return set(null);

    switch (typeof defaultState) {
      case "boolean":
        return set(false as any);
      case "number":
        return set(0 as any);
      case "string":
        return set("" as any);
      case "object":
        return set({} as any);
      default:
        return set(defaultState);
    }
  }, [defaultState, set]);

  return useMemo(
    () => ({
      value,
      valueRef,
      set,
      eventHandler,
      initial: defaultState,
      reset,
      clear,
      touched,
      dirty,
    }),
    [clear, defaultState, dirty, eventHandler, reset, set, touched, value]
  );
};

export type EasyState<T> = ReturnType<typeof useEasyState<T>>;

Code Breakdown

1. State Management 🧠



const [value, _set] = useState<T>(defaultValue);
const valueRef = useRef<T>(defaultValue);
valueRef.current = value;
const [defaultState] = useState(defaultValue);
const [touched, setTouched] = useState(false);
const [dirty, setDirty] = useState(false);

value: Your current state.
valueRef: Reference to track value changes.
defaultState: Your "reset to factory settings" button. Because sometimes, you just need a fresh start. 🔄
touched: Did someone touch the state? Now you'll know. 👀
dirty: Tracks if the state has been modified. 🕵️

2. State Setter with Side Effects 🔄



const set: Dispatch<SetStateAction<T>> = useCallback((...args) => {
  _set(...args);
  setDirty(true);
  setTouched(true);
}, []);

set: Updates the state and flags it as touched and dirty.

3. Event Handler ✋



const eventHandler = useCallback(
  (e: ChangeEvent<HTMLInputElement>) => set((e?.target?.value as any) || ""),
  [set]
);

eventHandler: Automatically updates your state based on user input. It's like magic, but without the wand. 🎩✨

4. Reset Functionality 🧹



const reset = useCallback(() => {
  setDirty(false);
  set(defaultState);
}, [defaultState, set]);

reset: Reverts everything back to square one. It's like hitting the undo button. 💥

5. Clear Functionality ❌



const clear = useCallback(() => {
  if (Array.isArray(defaultState)) return set([] as any);
  if (defaultState === null || defaultState === undefined)
    return set(defaultState);
  if (defaultState instanceof Date) return set(null);

  switch (typeof defaultState) {
    case "boolean":
      return set(false as any);
    case "number":
      return set(0 as any);
    case "string":
      return set("" as any);
    case "object":
      return set({} as any);
    default:
      return set(defaultState);
  }
}, [defaultState, set]);

clear: Clears the state based on its type. 🧹✨

6. Memoized Return Object 🧳



return useMemo(
  () => ({
    value,
    valueRef,
    set,
    eventHandler,
    initial: defaultState,
    reset,
    clear,
    touched,
    dirty,
  }),
  [clear, defaultState, dirty, eventHandler, reset, set, touched, value]
);

useMemo: Neatly packages everything together, It only changes when it absolutely needs to, so you’re not dealing with any unnecessary re-renders.

Real-World Usage of `useEasyState` 🌎

Ready to see this in action? Let's check out how useEasyState makes your life easier and your code cleaner.

Example 1: Managing Form State ✍️

Let’s say you’re building a form to collect user info. You need something that can handle all that input without breaking a sweat.



import React from "react";
import { useEasyState } from "./useEasyState";

const UserForm = () => {
  const nameState = useEasyState<string>("");
  const emailState = useEasyState<string>("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Name:", nameState.value);
    console.log("Email:", emailState.value);

    // Simulate form submission...
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={nameState.value}
          onChange={nameState.eventHandler}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={emailState.value}
          onChange={emailState.eventHandler}
        />
      </div>
      <div>
        <button type="submit">Submit</button>
        <button type="button" onClick={nameState.reset}>
          Reset Name
        </button>
        <button type="button" onClick={emailState.clear}>
          Clear Email
        </button>
      </div>
    </form>
  );
};

export default UserForm;

Key Points:

nameState and emailState make managing your form a breeze.
reset and clear are there when you need them.

Example 2: Controlled Component with Default Value 🎛️

Need to control an input with a default value? useEasyState has your back.



import React from "react";
import { useEasyState } from "./useEasyState";

const ControlledInput = () => {
  const defaultText = "Hello World";
  const textState = useEasyState(defaultText);

  return (
    <div>
      <input
        type="text"
        value={textState.value}
        onChange={textState.eventHandler}
      />
      <button onClick={textState.reset}>Reset</button>
      <button onClick={textState.clear}>Clear</button>
      <p>Current Value: {textState.value}</p>
      <p>Dirty: {textState.dirty ? "Yes" : "No"}</p>
      <p>Touched: {textState.touched ? "Yes" : "No"}</p>
    </div>
  );
};

export default ControlledInput;

Key Points:

The default value of "Hello World" is easy to manage, modify, or reset.
It tracks whether you've messed with the input like a responsible adult.

Example 3: Managing Non-String State 🚀

Who says useEasyState is only for strings? It’s ready to handle arrays, objects, and whatever else you throw at it.



import React from "react";
import { useEasyState } from "./useEasyState";

const ManageArrayState = () => {
  const itemsState = useEasyState<string[]>([]);

  const addItem = () => {
    itemsState.set((prevItems) => [
      ...prevItems,
      `Item ${prevItems.length + 1}`,
    ]);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={itemsState.clear}>Clear Items</button>
      <ul>
        {itemsState.value.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ManageArrayState;

Key Points:

This hook handles arrays like a champ.
addItem and clear keep things fresh and clean.

Why useEasyState Makes Development Faster and Easier ⏳🧠

Less Boilerplate 🚫📄: Forget about juggling multiple useState hooks, writing event handlers, and managing reset logic. useEasyState consolidates these tasks into one hook, reducing code clutter and saving you time for other important tasks.
Consistent State Management 🔑: Achieve uniform and reliable state management across your components. useEasyState ensures that state handling is smooth and consistent, making your codebase more dependable and easier to maintain.
Versatile and Flexible 🌀: Whether you're dealing with strings, numbers, arrays, or other data types, useEasyState adapts to your needs. The hook’s clear and reset functions handle different types automatically, freeing you from manual type-checking.
Focus on What Matters 🎉: Skip the repetitive tasks and dive into the exciting parts of development. useEasyState simplifies state management, allowing you to concentrate on building features and enhancing your application.

⚠️ Caveat: Handling `useEffect` Dependencies with `useEasyState`

When using useEasyState, a common issue arises when setting state within a useEffect hook. The hook tends to add the entire useEasyState object as a dependency if you attempt to set it directly from within the useEffect. This can lead to unintended re-renders and performance issues. 😅

🧩 The Problem

Say you've got this:



const something = useEasyState();

And then you decide to do this in a useEffect:



useEffect(() => {
  something.set("some value");
}, [something.set]);

Now, you'd think everything's fine, right? But no. React sees something.set and says, "Hey, why not take the whole something object along for the ride?" And boom, your effect starts re-running more often than you'd like. 😩

The useEffect will consider something (the entire object) as a dependency, leading to unnecessary re-executions of the effect. 😬

🛠️ Why This Happens

Technically, you don't need to use the depFn function here. If you add something.set to the dependency list and use it as expected, React will behave. But—there's always a "but"—the ESLint rule that checks your dependencies doesn't quite get it. It sees you accessing a function within an object and thinks, "Hmm, better play it safe and throw the whole object in there." 🤦‍♂️

It's frustrating, right? If you don't actually invoke the function but just refer to it, ESLint stays quiet. But the moment you start using it, the complaints roll in. One day, maybe we'll live in a world where this rule is smarter. Until then, we have a workaround.

🛠️ The Solution: `depFn`

To avoid this, you can use a utility function like depFn to limit the dependencies to just the setter method:



type AnyFunction = (...args: any[]) => any | Promise<any>;
export const depFn = <T extends AnyFunction>(fn: T, ...args: Parameters<T>) =>
  fn?.(...args);

When using depFn, your useEffect would look like this:



useEffect(() => {
  depFn(something.set, "some value");
}, [something.set]);

This way, the dependency array only includes something.set instead of the entire something object, which prevents unnecessary re-renders. 🚀

📜 Summary

While useEasyState simplifies state management significantly, it's important to be aware of how React handles dependencies in hooks like useEffect. By using a helper like depFn, you can keep your effects efficient and avoid performance pitfalls. 💪

If you found this article helpful and enjoyed exploring the useEasyState, please consider starring middleware repository where we use it live in action.
Your support helps us continue improving and sharing valuable content with the community. Thank you!

middlewarehq / middleware

✨ Open-source DORA metrics platform for engineering teams ✨

Open-source engineering management that unlocks developer potential

Join our Open Source Community

Introduction

Middleware is an open-source tool designed to help engineering leaders measure and analyze the effectiveness of their teams using the DORA metrics. The DORA metrics are a set of four key values that provide insights into software delivery performance and operational efficiency.

They are:

Deployment Frequency: The frequency of code deployments to production or an operational environment.
Lead Time for Changes: The time it takes for a commit to make it into production.
Mean Time to Restore: The time it takes to restore service after an incident or failure.
Change Failure Rate: The percentage of deployments that result in failures or require remediation.

Table of Contents

Middleware - Open Source

View on GitHub

Best Architecture for Your Next Project, Framework Doesn’t Matter! 🎉

shivam singh — Tue, 16 Jul 2024 14:08:14 +0000

How Simple Engineering Works
What Happens When We Decide to Scale or Mature the Project
What the Heck is BFF?
How BFF Helps with Scaling the Project
Using BFF in the Real World
Benefits of Using BFF

How Simple Engineering Works

Frontend makes a call to Backend APIs.
Backend APIs process the request and send a response back.
The Frontend renders the response accordingly.

This works pretty well when you're building an MVP.

What Happens When We Decide to Scale or Mature the Project 🚀

Backend APIs start following the Single Responsibility Principle.
APIs can be grouped together in services, or microservices can be introduced.
Client-side code becomes more complex.
Frequent changes in request-response structures become common between frontend and backend.
More data gets loaded into the frontend.
When addressing multiple client types (e.g., web and mobile), APIs become more bloated.
Multiple concurrent requests go to the backend to address page UI demands.

This can become as overwhelming as my girlfriend’s never-ending list of demands. So, to help, one of my senior team-mates introduced me to the concept of BFF. Whether in real life or code, BFFs always have your back.

What the Heck is BFF? 🤔

A Backend for Frontend (BFF) is a mediator that tailors backend services to the specific needs of different clients. Think of it as the best friend who filters all the chaos and serves you only what you need. The frontend calls a BFF server API endpoint, and then the BFF does the heavy lifting, calling all the backend services required.

How BFF Helps with Scaling the Project 🛠️

Why maintain another mediator server, BFF, in this case? Why not stick to the old and proven two-tier architecture?

Because now we care about user experience! We’re no longer an MVP and can’t be running around like headless chickens.

Our backend APIs follow the Single Responsibility Principle, but our UI needs a lot of data, which means making calls to many backend APIs. The catch is that most browsers only allow 6 concurrent requests per domain. You can read more on this limitation over this Stackoverflow thread. So, if you have a dashboard showing data from 3-4 services, each with many APIs, the browser can only handle 6 at a time. Once those are done, it processes the next 6. And this is without counting the initial script loading!

Enter BFF: The client makes a single call to the BFF, and the BFF makes all the calls to all the services without the parallel connection limitations. Problem solved!

But what if the number of concurrent connections wasn’t the issue? Should you still use the BFF pattern? My answer is a resounding yes!

Imagine you have a dashboard showing data from 3-4 services. You’ll likely be doing some client-specific computation, adaptation, or transformation of data before showing it to the end user. For small chunks, doing this on the client works well. But as the data transformations get more complex, it becomes a bottleneck for user experience. JavaScript is single-threaded, and the UI starts to feel laggy or jittery because the browser is busy transforming data instead of serving the UI.

A simple fix: Move all the presentation, adaptation, or transformation logic to the BFF. This way, the client's browser is free to focus on rendering content. Plus, the BFF adapts to any changes in backend API response structures, so the frontend sees a consistent response structure.

But what about the BFF API becoming too generalized or bloated? Doesn’t it need to follow the Single Responsibility Principle too?

The single responsibility principle is a bit different for BFF. A single BFF server endpoint should ideally load or update data related to a single UI page. Different client types (like mobile and web) can have their own BFF servers. Each BFF server sends back a thin, tailored response to the client. Mobile has less real estate than web, so the BFF server can easily trim the response.

So, while BFF server APIs might seem bloated and generalized compared to backend service APIs, they still follow the Single Responsibility Principle.

Using BFF in the Real World 🌍

Setting Up and Exploring an Open-Source Project

Project Setup:
- Follow the steps in the project's README to set up the project.
- Once the setup is complete and the server is running, visit https://localhost:3000/dora-metrics.
Open Network Tab:
- Open your browser's developer tools (press F12 or Ctrl+Shift+I).
- Go to the 'Network' tab to monitor API calls.
Observe API Calls:
- Notice that the page loads most of its data from the response of /internal/team/${team_id}/dora_metrics.
- This is a BFF API endpoint responsible for loading all the required data for the /dora-metrics route page.

Examine the Codebase:
- Navigate to the code for the /internal/team/[team_id]/dora_metrics module.
- Observe the concurrent invocation of multiple backend services using Promise.all.

Understand the Benefits:
- Under the hood, we are calling 5 different backend services and making a total of 18 API calls.
- If the same number of calls were made from the frontend, it could take 3x more time than using the BFF approach.

Following these steps will help you understand how the BFF pattern is implemented in a real-world project and appreciate the benefits it brings in terms of performance and user experience.

Benefits of Using BFF 🌟

Improved User Experience: By offloading complex data transformations and aggregations to the BFF, the client's browser can focus on rendering, resulting in a smoother UI experience.
Optimized API Calls: The BFF can aggregate multiple backend API calls into a single call, reducing the number of requests the client needs to make.
Tailored Responses: Different clients (web, mobile) can have their specific BFF servers, ensuring that each client receives data tailored to their needs.
Adaptability: The BFF can adapt to changes in backend API structures, providing a consistent interface to the frontend.

In conclusion, adopting the BFF pattern can significantly improve the scalability, maintainability, and user experience of your application as it evolves from an MVP to a mature product. And remember, whether in code or life, a good BFF always has your back!

If you found this article helpful and enjoyed exploring the BFF pattern, please consider starring middleware repository. Your support helps us continue improving and sharing valuable content with the community. Thank you!

middlewarehq / middleware

✨ Open-source DORA metrics platform for engineering teams ✨

Open-source engineering management that unlocks developer potential

Join our Open Source Community

Introduction

They are:

Deployment Frequency: The frequency of code deployments to production or an operational environment.
Lead Time for Changes: The time it takes for a commit to make it into production.
Mean Time to Restore: The time it takes to restore service after an incident or failure.
Change Failure Rate: The percentage of deployments that result in failures or require remediation.

Table of Contents

Middleware - Open Source

View on GitHub

DEV Community: shivam singh

Why It's Time to Ditch useState and Upgrade to useEasyState!

Custom React Hook: useEasyState 🎉

Code Breakdown

Real-World Usage of useEasyState 🌎

Example 1: Managing Form State ✍️

Example 2: Controlled Component with Default Value 🎛️

Example 3: Managing Non-String State 🚀

Why useEasyState Makes Development Faster and Easier ⏳🧠

⚠️ Caveat: Handling useEffect Dependencies with useEasyState

🧩 The Problem

🛠️ Why This Happens

🛠️ The Solution: depFn

📜 Summary

middlewarehq / middleware

✨ Open-source DORA metrics platform for engineering teams ✨

Introduction

Best Architecture for Your Next Project, Framework Doesn’t Matter! 🎉

Table of Contents

How Simple Engineering Works

What Happens When We Decide to Scale or Mature the Project 🚀

What the Heck is BFF? 🤔

How BFF Helps with Scaling the Project 🛠️

Using BFF in the Real World 🌍

Benefits of Using BFF 🌟

middlewarehq / middleware

✨ Open-source DORA metrics platform for engineering teams ✨

Introduction

Custom React Hook: `useEasyState` 🎉

Real-World Usage of `useEasyState` 🌎

⚠️ Caveat: Handling `useEffect` Dependencies with `useEasyState`

🛠️ The Solution: `depFn`