How we reduced our re-renders by 80% with React Redux and custom context

import React from "react"
import { render } from "react-dom"
import { Provider } from "react-redux"

import store from "./globalStore"

import App from "./App"

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root"),
)

import { createStore } from "redux"

/**
 * Define and export action types.
 */
export const INIT_APP = "INIT_APP"
export const SOME_GLOBAL_UPDATE_FORM_ACTION = "SOME_GLOBAL_UPDATE_FORM_ACTION"
export const SOME_GLOBAL_RESET_FORM_ACTION = "SOME_GLOBAL_RESET_FORM_ACTION"

/**
 * Example 'global' Redux store
 * that might exist in your app already.
 */
const initialState = {
  initialized: false,
  forms: {},
  someUserData: {},
  // ... etc
}

/**
 * A standard reducer function.
 *
 * @param {object} state
 * @param {object} action
 * @returns {object} nextState
 */
const reducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case INIT_APP:
      return {
        ...state,
        initialized: true,
      }
    case SOME_GLOBAL_UPDATE_FORM_ACTION:
      return {
        ...state,
        forms: { ...state.forms, [payload.formId]: payload.values },
      }
    case SOME_GLOBAL_RESET_FORM_ACTION:
      return {
        ...state,
        forms: Object.fromEntries(
          Object.entries(state.forms).filter(([key]) => key !== payload.formId),
        ),
      }
    // ... etc
    default:
      return state
  }
}

export default createStore(reducer)

import React, { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux"

import { FormContainer } from "./FormContainer"

/**
 * App component with some example form components.
 *
 * @returns {React.FC}
 */
const App = () => {
  const dispatch = useDispatch()
  const isInitialized = useSelector((state) => state.initialized)

  useEffect(() => {
    if (!isInitialized) dispatch({ type: "INIT_APP" })
  }, [dispatch, isInitialized])

  return (
    <div className="App">
      <h1>React + Redux app</h1>
      <hr />
      <FormContainer formId="homeBillingForm" />
      <FormContainer formId="homeShippingForm" />
      <FormContainer formId="guestLoginForm" />
    </div>
  )
}

export default App

import React from "react"

/**
 * Form presentational component.
 *
 * @returns {React.FC}
 */
const Form = ({ children, ...props }) => <form {...props}>{children}</form>

export default Form

import React from "react"

/**
 * Example input presentational component.
 *
 * @returns {React.FC}
 */
const FormInput = ({ children, ...props }) => (
  <div className="FormInput">
    <input type="text" {...props} />
    {children}
  </div>
)

export default FormInput

import { createContext } from "react"

const FormContext = createContext(null)

export default FormContext

import React, { useCallback, useEffect, useRef } from "react"
import { Provider, useDispatch } from "react-redux"

import FormContext from "./context"
import { SOME_GLOBAL_UPDATE_FORM_ACTION } from "./globalStore"
import { createFormStore, useFormActions, useFormSelector } from "./hooks"
import { valuesSelector, requiredFieldsFilledSelector } from "./selectors"

import Form from "./Form"

/**
 * Form container component.
 * In this component we will handle business logic.
 *
 * @returns {React.FC}
 */
const FormContainer = ({ formId, children, ...props }) => {
  /**
   * We're still free to use the 'global' dispatch function wherever we like.
   */
  const dispatch = useDispatch()

  /**
   * Get a function from a custom hook which we'll write later on
   */
  const { setFormId } = useFormActions()

  /**
   * Get values from the form store using our
   * custom Redux hook 'useFormSelector'.
   */
  const values = useFormSelector(valuesSelector)
  const requiredFieldsFilled = useFormSelector(requiredFieldsFilledSelector)

  useEffect(() => {
    setFormId(formId) // Just to demonstrate how to dispatch to the form store
  }, [setFormId, formId])

  const onSubmitHandler = useCallback(
    (e) => {
      e.preventDefault()

      if (requiredFieldsFilled) {
        dispatch({
          type: SOME_GLOBAL_UPDATE_FORM_ACTION,
          payload: { formId, values },
        })
      }
    },
    [dispatch, requiredFieldsFilled, formId, values],
  )

  return (
    <Form onSubmit={onSubmitHandler} {...props}>
      {children}
    </Form>
  )
}

/**
 * Connected form container component.
 * Connects the component to the form context.
 * This allow the use of custom Redux hooks.
 * https://react-redux.js.org/next/api/hooks#custom-context
 */
const ConnectedFormContainer = connect(null, null, null, {
  context: FormContext,
})(FormContainer)

/**
 * Form container provider.
 * Provides a Redux store for each form instance and renders the connected form container.
 * https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context
 *
 * You can provide an optional parameter 'store' which can be useful when writing tests.
 * (not covered in this blog post)
 *
 * @returns {React.FC}
 */
const FormContainerProvider = ({ store, children, ...props }) => {
  /**
   * Create a new store for every instance of FormContainerProvider.
   * 'useMemo' makes sure we create the store only once before the component will mount.
   * 'useRef' makes sure we get a consistent reference to the store object.
   */
  const formStore = useMemo(() => store || createFormStore(), [])
  const { current } = useRef(formStore)

  return (
    <Provider context={FormContext} store={current}>
      <ConnectedFormContainer {...props}>{children}</ConnectedFormContainer>
    </Provider>
  )
}

/**
 * Export the form container provider instead of the form container component.
 */
export { FormContainerProvider as default }

import React, { useMemo } from "react"

import { formIdSelector, createFormConfigSelector } from "./hooks"
import { useFormActions } from "./hooks"

import FormInput from "./FormInput"

/**
 * Form input container component.
 *
 * @returns {React.FC}
 */
const FormInputContainer = ({ name, children, ...props }) => {
  /**
   * ❌ creates a subscription and triggers a re-render on all updates to FormContext.
   */
  // const { someValue } = useContext(FormContext)

  /**
   * ⚠️ creates a subscription to a single store value.
   */
  // const someValue = useFormSelector(state => state.someValue)

  /**
   * ✅ creates a memoized subscription to a single store value.
   */
  // const someValue = useFormSelector(someValueSelector)

  // Example usage, using reselect-like selectors:
  const formId = useFormSelector(formIdSelector)

  // We may want to use a prop or other variable to select something from the store
  // Create the selector function once with useMemo
  const formConfigSelector = useMemo(createFormConfigSelector, [])
  const formConfig = useFormSelector((state) =>
    formConfigSelector(state, formId),
  )
  console.log(formConfig)

  const { setValue } = useFormActions()

  const onChangeHandler = useCallback((e) => setValue(name, e.target.value), [
    setValue,
    name,
  ])

  return (
    <FormInput onChange={onChangeHandler} {...props}>
      {children}
    </FormInput>
  )
}

export default FormInputContainer

/**
 * Just a single example of all the utility functions
 * that we would use in our complex form.
 *
 * @param {string} value An input value
 * @param {object} validationRule A dynamic validation rule
 * @returns {boolean} isValid
 */
export const validateInput = (value, validationRule) => {
  if ((value === undefined || value === "") && validationRule?.isRequired) {
    return false
  }

  if (value && value?.length > validationRule?.maxLength) {
    return false
  }

  return true
}

import { useCallback } from "react"
import { createStore } from "redux"
import {
  createStoreHook,
  createDispatchHook,
  createSelectorHook,
  useDispatch,
} from "react-redux"

import FormContext from "./context"
import { SOME_GLOBAL_RESET_FORM_ACTION } from "./globalStore"
import { formIdSelector, validationRulesSelector } from "./selectors"
import { validateInput } from "./utils"

/**
 * Form reducer constants.
 */
const SET_FORM_ID = "SET_FORM_ID"
const SET_VALUE = "SET_VALUE"
const SET_VALIDATION_RULES = "SET_VALIDATION_RULES"
const RESET_FORM_STATE = "RESET_FORM_STATE"

/**
 * Form reducer initial state.
 */
const initialState = {
  formId: undefined,
  values: {},
  validityValues: {},
  validationRules: {},
}

/**
 * Another standard reducer function.
 * This reducer will only handle form actions.
 *
 * @param {object} state
 * @param {object} action
 * @returns {object} nextState
 */
const reducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case SET_FORM_ID:
      return { ...state, formId: payload }
    case SET_VALUE:
      return {
        ...state,
        values: {
          ...state.values,
          [payload.key]: payload.value,
        },
        validityValues: {
          ...state.validityValues,
          [payload.key]: payload.isValid,
        }
      }
    case SET_VALIDATION_RULES:
      return {
        ...state,
        validationRules: { ...state.validationRules, ...payload },
      }
    case RESET_FORM_STATE:
      return { ...initialState }
    default:
      return state
  }
}

/**
 * Redux form store factory function.
 *
 * Note that 'preloadedState' is not used in this example.
 * It's useful when you want to provide a custom initial state
 * when writing tests for example.
 *
 * @param {object} preloadedState Optional, default: undefined
 * @returns {object} store
 */
export const createFormStore = (preloadedState) =>
  createStore(reducer, { ...initialState, ...preloadedState })

/**
 * Rarely used hook for retrieving the form store directly.
 * Preferably, use useFormSelector to access store values.
 */
export const useFormStore = createStoreHook(FormContext)

/**
 * Form dispatch hook, similar to react-redux's useDispatch hook.
 * Actions dispatched using this hook will only affect the specified context.
 */
export const useFormDispatch = createDispatchHook(FormContext)

/**
 * Form selector hook, similar to react-redux's useSelector.
 * Use this hook to retrieve data from the form store.
 */
export const useFormSelector = createSelectorHook(FormContext)

/**
 * Hook for convenient access to the form Redux actions.
 *
 * @returns {object} formActions
 */
export const useFormActions = () => {
  /**
   * Use useDispatch and useFormDispatch to be able to
   * dispatch actions to both the form store and the global store.
   */
  const dispatch = useDispatch()
  const formDispatch = useFormDispatch()

  /**
   * Get (aka select) some values from the form store with 'useFormSelector'.
   * It's no problem to use these hooks inside other hooks like this.
   */
  const formId = useFormSelector(formIdSelector)
  const validationRules = useFormSelector(validationRulesSelector)

  /**
   * Sets the form id.
   *
   * @param {string} id
   */
  const setFormId = useCallback(
    (id) => formDispatch({ type: SET_FORM_ID, payload: id }),
    [formDispatch],
  )

  /**
   * Sets a form value and does a validation check.
   * We keep track of the value's validity using the 'validityValues' object.
   *
   * @param {string} key
   * @param {string} value
   */
  const setValue = useCallback(
    (key, value) => {
      if (value === undefined) return

      const isValid = validateInput(value, validationRules?.[key])

      formDispatch({
        type: SET_VALUE,
        payload: { key, value, isValid },
      })
    }
    [formDispatch, validateInput, validationRules],
  )

  /**
   * Sets the validation rules.
   *
   * @param {object} validationRules
   */
  const setValidationRules = useCallback(
    (validationRules) =>
      formDispatch({ type: SET_VALIDATION_RULES, payload: validationRules }),
    [formDispatch],
  )

  /**
   * Reset the entire form state in the current context.
   * And - as an example - also update the global Redux store.
   */
  const resetFormValues = useCallback(() => {
    formDispatch({ type: RESET_FORM_STATE })
    dispatch({ type: SOME_GLOBAL_RESET_FORM_ACTION, payload: formId })
  }, [formDispatch, dispatch, formId])

  return {
    setFormId,
    setValue,
    setValidationRules,
    resetFormValues,
  }
}

import { createSelector, createSelectorCreator, defaultMemoize } from "reselect"
import isEqual from "react-fast-compare"

/**
 * Creates a custom selector creator function.
 * The resulting selector performs a deep equality comparison.
 * Uses the 'isEqual' function from 'react-fast-compare'
 * Useful for memoization of values of type object or array.
 *
 * The default 'createSelector' performs strict reference equality comparison (with '===').
 */
export const createDeepEqualSelector = createSelectorCreator(
  defaultMemoize,
  isEqual,
)

/**
 * Composable memoized Redux selector functions.
 * Syntax: createSelector|createDeepEqualSelector(...inputSelectors, resultFn)
 * https://github.com/reduxjs/reselect
 *
 * Each selector must be a 'pure' function.
 * A benefit of this is that it makes selectors very reliable and easily testable.
 */
export const formIdSelector = createSelector(
  (state) => state?.formId,
  (formId) => formId,
)

export const valuesSelector = createDeepEqualSelector(
  (state) => state?.values || {},
  (values) => values,
)

export const validationRulesSelector = createDeepEqualSelector(
  (state) => state?.validationRules || {},
  (validationRules) => validationRules,
)

export const validityValuesSelector = createDeepEqualSelector(
  (state) => state?.validityValues || {},
  (validityValues) => validityValues,
)

/**
 * Before, we would calculate a value like this inside (multiple) components.
 * In this new approach we can move the computation to a re-usable selector, like this:
 */
export const requiredFieldsFilledSelector = createSelector(
  valuesSelector,
  validationRulesSelector,
  validityValuesSelector,
  (values, validationRules, validityValues) =>
    Object.keys(values)
      .filter((key) => validationRules?.[key]?.required)
      .every((key) => validityValues?.[key] === true),
)

// imports, other selectors, etc...

export const formConfigsSelector = createDeepEqualSelector(
  (state) => state?.formConfigs || {},
  (formConfigs) => formConfigs,
)

export const useShippingAsBillingSelector = createSelector(
  (state) => state?.useShippingAsBilling,
  (useShippingAsBilling) => useShippingAsBilling,
)

/**
 * Example of a selector creator function.
 * (returns a selector which you can pass an argument)
 */
export const createFormConfigSelector = () =>
  createDeepEqualSelector(
    formConfigsSelector,
    (_, formId) => formId,
    (formConfigs, formId) => formConfigs?.[formId] || {},
  )

/**
 * Selecting a child property from the store
 */
export const formConfigShippingSelector = createDeepEqualSelector(
  formConfigsSelector,
  (formConfigs) => formConfigs?.shipping,
)

/**
 * This selector selects a value that has slightly different behavior
 * as is often the case in more complex apps.
 */
export const formConfigBillingSelector = createDeepEqualSelector(
  formConfigsSelector,
  useShippingAsBillingSelector,
  (formConfigs, useShippingAsBilling) =>
    useShippingAsBilling ? {} : formConfigs?.billing,
)

export const combinedFormConfigSelector = createDeepEqualSelector(
  formConfigShippingSelector,
  formConfigBillingSelector,
  (formConfigShipping, formConfigBilling) => ({
    ...formConfigShipping,
    ...formConfigBilling,
  }),
)

/**
 * Or:
 */
export const combinedFormConfigSelector = createDeepEqualSelector(
  formConfigShippingSelector,
  formConfigBillingSelector,
  (...args) => Object.assign({}, ...args),
)

/**
 * Transforming the selection even further:
 */
export const combinedFormConfigValuesSelector = createDeepEqualSelector(
  combinedFormConfigSelector,
  Object.values,
)

import { createCachedSelector, LruObjectCache } from "re-reselect"

/**
 * This creates a selector that caches based on the 'prefix' value.
 * So whenever this selector is called with a previously used prefix it will return the
 * previously computed selection, instead of re-evaluating the example 'formatValues' function.
 * The function determining which value the selector should cache on is referred to as 'keySelector'.
 *
 * Note that these variable names from the store are totally random and
 * have nothing to do with the examples listed above.
 */
const formattedFormValuesSelector = createCachedSelector(
  (state) => state.values,
  (state, format) => format,
  (state, format, prefix) => prefix,
  (values, format, prefix) => formatValues(values, format, prefix),
)((state, format, prefix) => prefix) // Cache selectors by prefix

/**
 * This is exactly the same.
 */
const formattedFormValuesSelector = createCachedSelector(
  (state) => state.values, // a
  (state, format) => format, // b
  (state, format, prefix) => prefix, // c
  (a, b, c) => formatValues(a, b, c), // resultFn
)((state, format, prefix) => prefix) // keySelector

/**
 * Or:
 */
const formattedFormValuesSelector = createCachedSelector(
  (state) => state.values,
  (state, format) => format,
  (state, format, prefix) => prefix,
  formatValues, // It's just functional programming!
)((state, format, prefix) => prefix) // Cache selectors by prefix

/**
 * Customizing the caching implementation by specifying a custom cache object
 * https://github.com/toomuchdesign/re-reselect/tree/master/src/cache#readme
 */
const formattedFormValuesSelector = createCachedSelector(
  (state) => state.values,
  (state, format) => format,
  (state, format, prefix) => prefix,
  formatValues,
)({
  keySelector: (state, format, prefix) => prefix, // Cache selectors by prefix
  cacheObject: new LruObjectCache({ cacheSize: 5 }), // Use the 'LruObjectCache' to cache a maximum of 5 objects
})