The 1 Design Pattern You Need to be Using that You're Probably Not

You've probably heard of software design patterns like DRY, SOLID and other acronyms.

Design patterns aren't just some academic jargon. They can make your life as a developer easier. They are time-tested methods for solving common problems.

Unfortunately, many developers are unaware of these patterns or how to use them practically.... I know this because I've worked with a ton of developers at various companies and seen this particular mistake way too often.

Tech moves fast. Your code should be able to keep up.

We are going to cover a very specific pattern which will help you and your team to move faster and write better code.

Let's take a look at some code that looks harmless on the surface

import axios from 'axios';

function SomeComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => setData(response.data))
  }, [])

  return (
    <div>
      {data.title}
    </div>
  )
}

A little component fetching data with Axios, an incredibly popular HTTP request library. What's the big deal?

Well, nothing. Yet.

Your app grows.

More components are added.

Many more requests are made using Axios.

Then.... the team decides to switch to using fetch due to a request from the legal team now that your app has scaled to a million users and the US Govt wants to buy it. You picked a good company 😎.

Ruh roh.

The app now has 420 instances of Axios being called directly. This will be a monumental task to replace all those calls, make sure they still work AND update the tests.

This isn't just a doomsday scenario, it's more common that you might think.

A popular LinkedIn tech influencer shared his experience with a similar issue that took his team 5 months to fix! 🤯

Here's how to avoid that costly error:

The Proxy Pattern

A proxy is basically a wrapper around another object. Like a substitute.

So instead of calling Axios or some other 3rd party service directly, you proxy your request through a wrapper.

Here's a proxy which wraps around the Axios library:

import axios from 'axios';

class HttpService {
  async get(url) {
    const { data } = await axios.get(url);
    return data;
  }

  async post(url, body) {
    const { data } = await axios.post(url, body);
    return data;
  }
}

export default new HttpService();

And here is our component using the proxy.

import httpService from './httpService';

function SomeComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    httpService.get('https://jsonplaceholder.typicode.com/todos/1')
      .then(data => setData(data))
  }, [])

  return (
    <div>
      {data.title}
    </div>
  )
}

It's now trivial to replace Axios with another library because our methods exposed through the HttpService are the same!

Let's replace Axios with fetch and now all 420 components using it will be updated as well:

class HttpService {
  async get(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  }

  async post(url, body) {
    const response = await fetch(url, {
      method: "POST",
      body: JSON.stringify(body),
      headers: {
        "Content-Type": "application/json"
      }
    });
    const data = await response.json();
    return data;
  }
}

export default new HttpService();

Amazing.

If you see examples in your own codebase which are similar, consider leveraging this pattern and maybe avoid a 5 month long refactor.

Want to learn with me?

Join my community which includes weekly group sessions to learn things like design patterns, testing and more and get lifetime access to my growing list of challenges and tutorials guaranteed to level you up.

This past Friday we learned how to write tests for React components. Coming up next is AWS Lambda. Join here.