DEV Community

loading...
Cover image for React Hooks Factories

React Hooks Factories

pietmichal profile image Michał Pietraszko Originally published at michalpietraszko.com Updated on ・3 min read

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" }
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

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] = useUppercasedString("Some Value")
  return (
    <>
      String1 is: <b>{string1}</b>
      <br />
      String2 is: <b>{string2}</b>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

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 />
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (6)

pic
Editor guide
Collapse
lyrod profile image
Lyrod • Edited

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"

Collapse
pietmichal profile image
Michał Pietraszko Author

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

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

Collapse
havespacesuit profile image
Eric Sundquist

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

Collapse
sunnysingh profile image
Sunny Singh

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

Collapse
guscarpim profile image
Gustavo Scarpim

Very nice post Michael congratulations

Collapse
dquanghuy4444 profile image
Đặng Quang Huy

have a good day guy