React Hooks Factories

Factory pattern with React Hooks is not mentioned often enough however, it is often used in popular libraries to push composition to its limits.

It can also be used to simplify, in some cases optimise, sharing state across the React app.

Factory Pattern Crash Course

Factory pattern is used to bring an ability to create objects on the runtime.

It usually looks like this. Bear in mind that these are simple examples to paint a picture.

interface User {
  name: string
}

class Factory {
  public static getUser(name: string): User {
    return { name }
  }
}

const user = Factory.getUser("Bob") // { name: "Bob" }

// Alternatively, without classes

function getUser(name: string): User {
  return { name }
}

const user = getUser("Bob") // { name: "Bob" }

First Hook Factory

It will be a custom hook wrapping useState but it will set a default value provided at the time of creation.

// Factory function that returns a new function that uses Hooks API.
function createHook(initialValue: string) {
  return function useHook() {
    return React.useState(initialValue)
  }
}

// Create the hook.
const useHook = createHook("some initial value")

// Use the hook in the component.
// The component will output: "State is: some initial value"
function Component() {
  const [state] = useHook()
  return (
    <>
      State is: <b>{state}</b>
    </>
  )
}

Hook Factory With Custom Logic

Factories unlock the next level of composition.
For example, a factory can produce a hook that can be given custom logic at the time of creation.

// Factory function that returns a new function that uses Hooks API.
function createMappedState(mapper: (value: string) => string) {
  return function useHook(initialValue: string) {
    const [state, setState] = React.useState(mapper(initialValue))

    // Define a custom setter applying custom logic.
    const setter = React.useCallback(
      (value: string) => {
        setState(mapper(value))
      },
      [setState]
    )

    // return a tuple to make API similar to React.useState
    return [state, setter]
  }
}

// You can create as many custom hooks you need
const useUppercasedString = createMappedState(value => value.toUpperCase())
const useLowercasedString = createMappedState(value => value.toLowerCase())

// Use the hook in the component.
// The component will output:
// `
// String is: SOME VALUE
// String is: some value
// `
function Component() {
  const [string1, setString1] = useUppercasedString("Some Value")
  const [string2, setString2] = useLowercasedString("Some Value")
  return (
    <>
      String1 is: <b>{string1}</b>
      <br />
      String2 is: <b>{string2}</b>
    </>
  )
}

Sharing state across hooks to create context without Context API

Factories get interesting when you realize that the new function has access to the scope of the factory.

function createSharedStateHook(initialValue: string) {
  let sharedValue = initialValue

  // An array in a shared scope.
  // Produced hook will always refer to it.
  const stateSetters: ((v: string) => void)[] = []

  // This function will update all components
  // that use the hook created by the factory.
  function setAllStates(value: string) {
    sharedValue = value
    stateSetters.forEach(set => {
      set(value)
    })
  }

  return function useSharedState(): [string, (v: string) => void] {
    const [state, setState] = React.useState(sharedValue)

    React.useEffect(() => {
      // On mount, add the setter to shared array.
      const length = stateSetters.push(setState)
      const index = length - 1
      return () => {
        // On unmount, remove the setter.
        stateSetters.splice(index, 1)
      }
    }, [setState])

    // The trick is to have the hook to return the same instance of `setAllStates`
    // at all times so the update will propagate through all components using the produced hook.
    return [state, setAllStates]
  }
}

const useSharedState = createSharedStateHook("initial")
const useAnotherSharedState = createSharedStateHook("another initial")

// `useSharedState` and `useAnotherSharedState` do not share the same state
// because returned hooks have access to different scopes.

function Component() {
  const [sharedState] = useSharedState()
  return (
    <>
      Shared state is: <b>{sharedState}</b>
    </>
  )
}

function AnotherComponent() {
  const [sharedState] = useAnotherSharedState()
  return (
    <>
      Another shared state is: <b>{sharedState}</b>
    </>
  )
}

function Modifier() {
  const [sharedState, setSharedState] = useSharedState()
  return (
    <input
      type="text"
      value={sharedState}
      onChange={e => setSharedState(e.target.value)}
    />
  )
}

function App() {
  return (
    <>
      <Component />
      <br />
      <AnotherComponent />
      <br />
      <Component />
      <br />
      <Modifier />
    </>
  )
}

Now, this hook provides a shared state without having to wrap an app with a Context Provider.

Not having to wrap a large section of the tree brings an alternative way to optimise re-renders without having to resort to more advanced APIs.

Who Is Using This Pattern?

Material-UI's makeStyles function allows to create styles for specific components.

use-local-storage-state - the prime example that inspired me to write this blog post.

In Conclusion

React Hooks are a great way to compose functionality in the ecosystem. Adding a factory pattern on top of it opens the door to more interesting ways to solve problems beyond stitching hooks together.

Blog