React: "I really wish this is how I could write components."

Mike Piccolo

@mfpiccolo

I really wish this is how I could write components.

04:08 AM - 05 Jun 2019

11 105

Challenge Accepted!

code for useMatchFetch down below.

import React from "react";
import { useMatchFetch } from "./effects/useMatchFetch";

export const Example = () => {
  const render = useMatchFetch("https://swapi.co/api/people/1/?format=json");

  return render({
    pending: () => <div>Loading</div>,
    error: err => <div>{err.toString()}</div>,
    data: data => <pre>{JSON.stringify(data, null, 2)}</pre>
  });
};

Watch my Live Stream

Want to see my process on how I created this? Watch me on Twitch!

useMatchFetch

I actually really like this. I think I might end up using this in a few places.

import { useState, useEffect } from "react";

const render = data => match =>
  data.pending ? match.pending()
  : data.error ? match.error(data.error)
  : data.data  ? match.data(data.data)
  : null // prettier-ignore

export const useMatchFetch = url => {
  const [data, setData] = useState({ pending: true });

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData({ data, pending: false }))
      .catch(error => setData({ error, pending: false }));
  }, [url]);

  return render(data);
};

End

Follow me on Twitter @joelnet