DEV Community: Tom Mitchelmore

Do you need global state?

Tom Mitchelmore — Thu, 08 Sep 2022 14:15:11 +0000

It's no secret that global state is an absolute nightmare - and not just in React. In this post I'm going to show you how to use the Context API and possibly save you the headache of setting up Redux.

The Context API

React's Context API is often overlooked by newer developers because it's not talked about as it probably should be. In short, it provides utilities for nested access to a value.

Have you ever had some state and passed it down through several layers of components? This is called Prop Drilling and it feels awkward for good reason - it's inefficient and really difficult to refactor! Context solves this problem.

Setting up Context

Imagine you're building a dashboard page to display information about a user - you could have several components that all need to consume that data:

Create a file called UserContext.ts:

import { createContext } from 'React'

const UserContext = createContext<User | null>(null)

export default UserContext

Providing Context to a component tree

Use the Context Provider in the top level of the dashboard:

import UserContext from './UserContext'

function Dashboard() {
  const user: User = {
    name: "Tom",
    email: "hello@mitchelmore.dev"
  }

  return (
    <UserContext.Provider value={user}>
       ...
    </UserContext.Provider>
  )
}

export default Dashboard

Consuming Context

Accessing our context is as simple as passing it to one of React's built-in hooks:

import { useContext } from 'react'
import UserContext from './UserContext'

function DisplayUser() {
  const user = useContext(UserContext)

  if (user === null) throw new Error("...")

  return (<div>{user.name}</div>)
}

It really is that simple - and it's something I discovered far too late into my journey with React.

When not to use Context

While Context is great for eliminating prop drilling - there are definitely scenarios where I'd be reaching for Redux:

Complex data

If your data is a giant nested object, then a global state library is something I'd definitely recommend. Redux, for example, will help you split it into manageable "slices" and also let you define actions to get and mutate data at your will.

Server-synchronised data

A much more sustainable approach to web app development is storing all data server-side and having the frontend reflect it. This completely eliminates global state on the frontend, and prevents issues with saving data as the backend is the single source of truth. Tanstack Query (formerly React Query) is by far the best and most popular solution - I'd highly recommend it!

Conclusion

To conclude, the purpose of this article is to help you understand how understanding React and its ecosystem can help you make architectural decisions. Far too often people spend hours setting up a library like Redux (increasing their bundle size!) just for functionality that could've been perfectly achieved with context.

Supercharging TailwindCSS: Building reusable components that scale

Tom Mitchelmore — Thu, 08 Sep 2022 14:09:41 +0000

Coming soon!

An introduction to custom React hooks

Tom Mitchelmore — Thu, 08 Sep 2022 08:33:31 +0000

As someone who's written React for several years now, it took me far too long to discover the joy of custom hooks - in fact it took me over 3 years! In this post, I'm going to show you how to take advantage of one of React's most powerful features.

What even is a hook?

A hook is quite simply a function which lets you hook into React's rendering lifecycle. Let's briefly look at the most common hook useState:

const [state, setState] = useState(0)

As you can see, useState hooks into React and provides an interface for managing state - it's entirely abstracted away the complexity that would otherwise be associated with it.

When we think of hooks as reusable abstractions, it makes them easier to reason about. As a component is reusable markup, a hook is just reusable logic!

I like to refer to React's built-in hooks as atomic - in that we typically use and combine them to build our own custom ones.

Our first custom hook

Let's build a basic custom hook to manage the state of a toggleable component (modal, dropdown, etc):

useToggle.ts

import { useState } from "react";

function useToggle(initial = false) {
  const [state, setState] = useState(initial);

  return [
    state,
    {
      open: () => setState(true),
      close: () => setState(false),
      toggle: () => setState((state) => !state)
    }
  ] as const;
}

export default useToggle;

Quick tip: using as const on our return value tells TypeScript to infer the type as a readonly tuple instead of a union type array! 😁

In this example, all we've done is wrap the use state hook with some logic that would otherwise pollute a component - look how easy it is to implement:

App.tsx

function App() {
  const [state, { open, close, toggle }] = useToggle();

  return (
    <div className="App">
      <button onClick={open}>Open</button>
      <button onClick={close}>Close</button>
      <button onClick={toggle}>Toggle</button>
      {state && <div>Hello!</div>}
    </div>
  );
}

...and that's it! I hope that after seeing this you can start to see how you might implement other hooks - try useQueue and useStack.

In a future post I'll detail how to implement some more complicated behaviour, and some common design patterns for handling refs, external data and more.