useLayoutEffect warning when server side rendering

[derekr]

Hey! In a NextJS project when consuming useField I get a warning about useLayoutEffect:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Thoughts on switching to useEffect or is there another workaround that doesn't involve only rendering fields on the client? Thanks!

Also incase it's helpful here is the component I'm rendering:

const RadioButton = ({ label, value, ...props }) => {
  return (
    <>
      <label>
        <HiddenRadio {...props} value={value} />
        <span className="block text-center text-gray-700 py-4 px-6 rounded-3xl md:leading-none cursor-pointer border-2 border-gray-700 hover:bg-gray-700 hover:text-gray-200 peer-checked:text-gray-200 peer-checked:bg-gray-700 peer-checked:cursor-default">
          {label}
        </span>
      </label>
    </>
  )
}

const AttendingField = () => {
  const [attendingProps, _attendingMeta] = useField({
    name: 'attending',
    initialValue: ''
  })

  return (
    <div className="flex justify-center gap-2">
      <RadioButton
        {...attendingProps}
        label="Joyfully accept"
        value="yes"
        checked={attendingProps.value === 'yes'}
      />
      <RadioButton
        {...attendingProps}
        label="Regretfully decline"
        value="no"
        checked={attendingProps.value === 'no'}
      />
    </div>
  )
}

[andyrichardson]

Hey @derekr thanks for the report 👍

If you have a moment, give fielder@2.1.1-beta.0 a shot and let me know if that's working as expected!

[derekr]

That did the trick! Thanks for the update :).

[andyrichardson]

@derekr thanks for testing that out, this is now resolved in v2.1.1