How To - Set Default Values

The values are ready upon component mount.

The data (props, state, or some computed value) is already available and does not require fetching or additional setup.

const App = forwardFormContext((_, ctx) => {
  ctx.useSetDefaultValues({
    ...defaultValues
  })

  return (
    ...
  )
});

The values are not yet ready upon component mount.

If the values are loaded asynchronously (e.g., fetching data from an API), they are not ready when the component mounts.

const App = forwardFormContext((_, ctx) => {

  // =============================================
  // Example 1
  // =============================================
  useEffect(() => {
    getDefaultValues().then((defaultValues) => {
      ctx.reset({
        ...defaultValues
      })
    })
  }, [ctx]);

  // =============================================
  // Example 2: Using react-query
  // =============================================
  const { data: defaultValues } = useQuery({...});

  useEffect(() => {
    if(!defaultValues) return;
    ctx.reset({
      ...defaultValues
    })
  }, [ctx, defaultValues]);

  return (
    ...
  )
});