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.

Comments

[Josh Weston]

Great post; I love this technique, but how did you handle the race condition that can occur when using the useSharedState hook? useEffect is asynchronous, so when the component is first mounted there is a moment of time between when useState is called and when the component registers itself to listen for changes in useEffect. During this moment of time, another component could change the state value, but the new component would be unaware because it is still waiting to register.

I ask because I have implemented a factory very similar to the approach you have described and am currently running into this issue. I could setState from within useEffect (with a useRef to avoid infinite looping); however, that seems a bit hacky. Thoughts?

[Michał Pietraszko]

I lack a little bit of context but I'll try my best.

It sounds to me that your abstraction breaks the single responsibility principle. Maybe your hook also has to include the asynchronous logic so it can flag that it is loading and prevent child components from setting the state?

I hope this helps.

[Manish Kumar]

Exactly what I am looking for today to solve my problem. Thank you so much

[Pơ Híp]

have a good day guy

[Lyrod]

Very good post.

One problem and one improvement

1. Factory class, you did Factory.getUser but getUser is not static, or you don't create factory via "new".

2. you could use useCallback instead in the Shared state example at "memoize the function"

[Michał Pietraszko]

Thanks for catching this! I've updated the examples.

The interesting thing is that useCallback or useMemo is not actually needed.

[Eric Sundquist]

One more catch - useUppercasedString listed twice, instead of useLowercasedString the second time.

[Michał Pietraszko]

Fixed :D

[Sunny Singh]

I love this technique, and great walkthrough of it! The use case of sharing state across hooks looks really interesting.

[Gustavo Scarpim]

Very nice post Michael congratulations