React patterns: Scroll to first validation error

import React, { useEffect } from 'react'
import { useFormikContext } from 'formik'

const ScrollToFirstError: React.FC = () => {
  const { submitCount, isValid } = useFormikContext()

  useEffect(() => {
    // Wrap the code in setTimeout to make sure it runs after the DOM has been
    // updated and has the error message elements.
    // Can maybe use useLayoutEffect instead.
    setTimeout(() => {
      // Only run on submit
      if (submitCount === 0) {
        return
      }

      // Find the first error message
      const errorMessageSelector = '[data-field-error]'
      const firstErrorMessage = document.querySelector(errorMessageSelector)
      if (!firstErrorMessage) {
        console.warn(
          `Form failed validation but no error field was found with selector: ${errorMessageSelector}`
        )
        return
      }

      // Find the first label with an error
      const inputId = firstErrorMessage.getAttribute('data-field-error')
      const errorLabelSelector = `label[for="${inputId}"]`
      const firstErrorLabel = document.querySelector(errorLabelSelector)

      if (!firstErrorLabel) {
        console.warn(
          `Could not find an error label with selector: ${errorLabelSelector}`
        )
        return
      }

      firstErrorLabel.scrollIntoView()
    }, 100)
  }, [submitCount, isValid])

  return null
}

export default ScrollToFirstError

import { Form, Formik } from 'formik'

const MyForm: React.FC = () => {
  return (
    <Formik>
      <Form>
         <ScrollToFirstError />
         // ....
      </Form>
    </Formik>
  )
}

import { Form, Formik } from 'formik'
import { scrollToFirstError } from '../lib/utils'

const MyForm: React.FC = () => {
  return (
    <Formik>
      <Form>
         <FormikEffect
           onError={scrollToFirstError}
         />
         // ....
      </Form>
    </Formik>
  )
}