DEV Community: jamel-86

Tired of Using Axios? Meet Undici, the Fast, Modern HTTP Client You Didn’t Know You Needed

jamel-86 — Thu, 15 Aug 2024 04:37:12 +0000

Let’s be honest, when it comes to making HTTP requests in Node.js, most developers default to Axios. And while it’s solid, it’s not the only game in town. But what if I told you there’s a newer, faster, and more modern library that’s actually built by the Node.js team themselves? Say hello to Undici.

Why Should You Care About Undici?

Undici (which means “eleven” in Italian) isn’t just another HTTP client—it’s a major performance booster that’s flown under the radar for most developers. Unlike Axios, which sits on top of the old http module, Undici was designed from the ground up to be highly efficient and take advantage of all the latest improvements in Node.js.

Here’s why you should consider giving Undici a shot:

Performance That’s Hard to Beat: Undici was built with performance in mind, offering blazing-fast speeds, especially under heavy load. In fact, it’s used by Node.js itself, which should tell you something about how reliable it is.
Native HTTP/1.1 and HTTP/2 Support: Undici doesn’t just handle HTTP/1.1 well; it also has native support for HTTP/2, making it future-proof for your applications.
Lightweight and Minimalist: If you’re tired of bloated libraries and just need a simple, efficient solution, Undici is a great fit. It’s low on dependencies, reducing the bloat in your project.
Maintained by Node.js Core Contributors: The fact that it’s directly maintained by core Node.js contributors means it’s always up to date with the latest Node.js advancements, making it an incredibly reliable choice.

How to Use Undici in Your Node.js Project
Undici might sound complex, but getting started is easier than you think. Here’s a quick example of how to use it:

const { request } = require('undici');

// Sending a GET request
async function fetchData() {
  const { body } = await request('https://jsonplaceholder.typicode.com/posts/1');
  const data = await body.json();
  console.log('Fetched data:', data);
}

// Sending a POST request
async function createPost() {
  const { body } = await request('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'Undici in Node.js',
      body: 'This is a modern HTTP client you should definitely check out.',
      userId: 1
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  });
  const data = await body.json();
  console.log('Post created:', data);
}

fetchData();
createPost();

Why Undici Might Be the Perfect Fit for Your Next Project

Optimized for High Performance: Whether you’re building a microservice or a monolithic app, speed matters. Undici’s optimized HTTP requests ensure you get the best performance with minimal overhead.
Direct Support from Node.js: You can rest easy knowing this library is maintained by the same people who build and maintain Node.js itself. It’s designed to work seamlessly with the latest Node.js versions.
Minimalism Without Sacrificing Power: If you prefer libraries that get out of the way and let you focus on the code, you’ll appreciate how lightweight Undici is while still offering the features you need.
Built for the Future: With built-in support for HTTP/2, Undici isn’t just about handling today’s needs—it’s ready for what’s next in web development.

Conclusion: Step Up Your HTTP Game with Undici

Undici might not have the name recognition of some other libraries (yet), but it’s already making waves among developers who prioritize performance and reliability. Whether you’re working on a high-traffic app or just want a modern tool that’s both powerful and minimalist, Undici is a solid choice.

So if you’re still reaching for Axios or sticking to the old http module, now’s the perfect time to explore Undici. It’s a library built with the future in mind—and it’s available today.

If you found this useful, please give it a like! and feel free to share your thoughts in the comments!

Simplifying State Management in React with Valtio

jamel-86 — Wed, 14 Aug 2024 14:31:47 +0000

Introduction:

State management in React has often been a complex topic, with various libraries offering different approaches. Valtio, a lesser-known but powerful state management library, takes a unique approach by making your state directly mutable and reactive. This post explores what Valtio is, how it works, and why it might be the right choice for your next project.

What is Valtio?
Valtio is a lightweight state management library that uses JavaScript proxies to make any object reactive. It’s designed to be simple and intuitive, allowing developers to work with state as if it’s a plain JavaScript object.

How Does Valtio Work?
Valtio creates a proxy object for your state. Whenever you mutate this proxy, Valtio automatically tracks the changes and triggers re-renders of components that depend on this state. This eliminates the need for reducers, actions, or stores, making state management more straightforward.

Getting Started with Valtio:

1. Installation:
First, you need to install Valtio via npm:

npm install valtio

2. Creating Reactive State:
Valtio allows you to create a reactive state using the proxy function. Here's how you can do it:

import { proxy } from 'valtio';

const state = proxy({
  count: 0,
  text: 'Hello, Valtio!',
});

function increment() {
  state.count += 1;
}

3. Using State in Components:
Valtio provides a useSnapshot hook that you can use to connect your state to React components:

import React from 'react';
import { useSnapshot } from 'valtio';

function Counter() {
  const snap = useSnapshot(state); // Read the state snapshot

  return (
    <div>
      <p>{snap.text}</p>
      <p>Count: {snap.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this example, the Counter component will automatically re-render whenever state.count or state.text changes.

Where Should You Set Up Proxies?

Valtio proxies are flexible and can be set up anywhere in your application depending on your needs:

Global State (Centralized Management): If the state is used across many parts of your application, it’s often beneficial to set up the proxy in a centralized location, such as a store.js file. This allows you to import and use the state wherever it's needed.

Example:

// store.js
import { proxy } from 'valtio';

export const state = proxy({
  user: null,
  theme: 'light',
});

Then, you can use this state across your application:

import { useSnapshot } from 'valtio';
import { state } from './store';

function App() {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>Current Theme: {snap.theme}</p>
    </div>
  );
}

4. Local State (Component-Specific Management):
For state that is only relevant to a single component, you can create the proxy directly within that component. This approach keeps the state management localized and the component self-contained.

Example:

Import React from 'react';
import { proxy, useSnapshot } from 'valtio';

function Counter() {
  const localState = proxy({
    count: 0,
  });

  const snap = useSnapshot(localState);

  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={() => (localState.count += 1)}>Increment</button>
    </div>
  );
}

Does Valtio Replace useEffect?

While useSnapshot handles state reactivity, useEffect is still crucial for managing side effects in your components. Here’s an example where both are used together:

import React, { useEffect } from 'react';
import { proxy, useSnapshot } from 'valtio';

const state = proxy({
  count: 0,
});

function increment() {
  state.count += 1;
}

function Counter() {
  const snap = useSnapshot(state);

  useEffect(() => {
    console.log('Component mounted');
    // Perform some side effect here, like fetching data
    return () => {
      console.log('Component unmounted');
      // Cleanup side effect here
    };
  }, []); // Empty dependency array means it runs once on mount

  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Advanced Usage: Derived State

Valtio supports derived state, which is essentially computed state that depends on the reactive state. Here’s an example:

import { proxy, useSnapshot } from 'valtio';

const state = proxy({
  count: 0,
  doubleCount: () => state.count * 2, // Derived state
});

function increment() {
  state.count += 1;
}

function Counter() {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>Count: {snap.count}</p>
      <p>Double Count: {snap.doubleCount}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Best Practices with Valtio

Keep It Simple: Valtio is designed to minimize boilerplate. Take advantage of direct state mutations without worrying about complex actions or reducers.
Use useEffect When Needed: Although Valtio simplifies state management, useEffect is still necessary for handling side effects like data fetching or subscriptions.
Derived State for Computations: Use derived state to compute values that depend on other state properties without having to store redundant data.
Conclusion:

Valtio offers a refreshing approach to state management by allowing direct state mutations and handling reactivity behind the scenes. It’s an excellent choice for developers looking for simplicity without sacrificing performance. If you’re tired of boilerplate-heavy state management solutions, Valtio might be exactly what you need.

If you found this useful, please give it a like! and feel free to share your thoughts in the comments!