Replies: 4 comments 3 replies
-
https://codesandbox.io/p/sandbox/vigorous-glade-vltq2f Example in astro |
Beta Was this translation helpful? Give feedback.
-
It seems you are mis-understanding how Astro hydration works and also react-hook-form works. You are using template directive A workaround for your issue is to use template directive Working demo: https://codesandbox.io/p/sandbox/naughty-benji-2t66hz?file=%2Fsrc%2Fpages%2Findex.astro%3A8%2C30 |
Beta Was this translation helpful? Give feedback.
-
I fully understand how Astro hydration works. This issue isn’t just Astro,
but next.js pages and app directory, and any server rendered then hydrated
component. It’s more obvious in app directory in both development and
production builds. Pages directory isn’t noticeable until a production
build. React code is still executed for hydration, just doesn’t have
access to “ref”, which is how RHF is setting values. I tested setting
defaultValue in the register function within react-hook-form and it was
able to actually server render the form as well as hydrate correctly.
Astro client:load performs server rendering with client hydration,
similarly to how next.js handles it.
This issue will be anywhere you do a react server render and use
react-hook-form, unless you explicitly pass “defaultValue” to all form
inputs.
If RHF could set defaultValue, there wouldn’t be a flash.
I want the server render to contain the form with pre-populated form then
for interactivity and benefits of RHF to take over after.
This effect becomes even worse for inputs with placeholders as you see
placeholder flash, for custom radios, ranges, etc.
Obviously using client:only or rendering form components only on the client
gets rid of it, but so many people use RHF and server render.
Even react documentation says to use defaultValue on inputs for
uncontrolled components, so I think RHF can probably set them directly if
defaultValues isn’t async.
…On Wed, Jun 28, 2023 at 7:50 PM leapful ***@***.***> wrote:
@j <https://github.com/j>
It seems you are mis-understanding how Astro hydration works and also
react-hook-form works.
You are using template directive client:load therefore Astro will try to
perform HTML server-side rendering for your Form component, meaning it will
produce HTML markup to the browser first. At that time, there is no
javascript execution (react-hook-form handling) to inject the value
therefore it will be flashed.
A workaround for your issue is to use template directive
client:only="react" to render Form component and only shows when it's
already rendered successfully.
Working demo:
https://codesandbox.io/p/sandbox/naughty-benji-2t66hz?file=%2Fsrc%2Fpages%2Findex.astro%3A8%2C30
—
Reply to this email directly, view it on GitHub
<#10603 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAEP4YV4BBZRX6GZMA7JQMTXNTUQVANCNFSM6AAAAAAZV3Y5SQ>
.
You are receiving this because you were mentioned.Message ID:
<react-hook-form/react-hook-form/repo-discussions/10603/comments/6310676@
github.com>
|
Beta Was this translation helpful? Give feedback.
-
If you really want to apply default value on server-side rendering, you need to do it manually. For example, using Working demo: https://codesandbox.io/p/sandbox/wizardly-haze-498fds?file=%2Fsrc%2Fcomponents%2FForm.tsx%3A25%2C57 |
Beta Was this translation helpful? Give feedback.
-
When you useForm on the server with default values set, you get a flash of values.
Can we populate the form's values on server render to prevent this?
Beta Was this translation helpful? Give feedback.
All reactions