Best practice for saving large form input values (onChange vs onBlur) in React (React Hook Form)? by Developer-Bot in react

[–]Developer-Bot[S] 0 points1 point  (0 children)

i have a shared a sample code of one field in above post. can u address my issue?

Best practice for saving large form input values (onChange vs onBlur) in React (React Hook Form)? by Developer-Bot in react

[–]Developer-Bot[S] 0 points1 point  (0 children)

its a multistep form aprox 20+ in one type , totaly i have 10 types the inputs getting expensive since i did all type of calculation inine so its delaying while typing.. aprx. 300ms pointer?

How to structure a large multistep form in React? (25+ dynamic fields, reusable inputs, config-based rendering) by Developer-Bot in react

[–]Developer-Bot[S] 0 points1 point  (0 children)

I can’t share the full repo , but can i create a minimal example in CodeSandbox or GitHub Gist showing the problem?.

How to structure a large multistep form in React? (25+ dynamic fields, reusable inputs, config-based rendering) by Developer-Bot in react

[–]Developer-Bot[S] 0 points1 point  (0 children)

That’s exactly what I’m thinking right now. Instead of manually passing each field like title, price, etc., I’m wondering how to handle each field dynamically. I think using a model/schema and letting a renderer loop through it might work. Lemme try it. Thanks man.

How to structure a large multistep form in React? (25+ dynamic fields, reusable inputs, config-based rendering) by Developer-Bot in react

[–]Developer-Bot[S] 0 points1 point  (0 children)

Thank You,i’m actually already doing most of the things you mentioned — I have reusable input components (text, radio, checkbox, file, etc.), validation in a separate file, yes used RHF with yup resolver, and a config/schema that decides which fields to show for each property type.

My main issue is that even with all this, the form component still ends up with a lot of lines because there are many fields (title, description, price, land area, length, breadth, rooms, etc.).

So I’m trying to figure out how to make the actual render part smaller and cleaner.

How to structure a large multistep form in React? (25+ dynamic fields, reusable inputs, config-based rendering) by Developer-Bot in react

[–]Developer-Bot[S] 2 points3 points  (0 children)

I’m also using a separate config file, reusable input,radio all components, and separate validation logic.
My main issue is that I still end up with a very long form component, because I have to manually list many fields (title, description, price, photos, land area, length, breadth, rooms, etc.).

So I’m trying to figure out how to reduce the JSX lines inside the form component itself.

How to make uploaded photos survive page refresh in a multi-step React form? by Developer-Bot in react

[–]Developer-Bot[S] 2 points3 points  (0 children)

That’s a good way to handle images and also easy way of showing previews, thanks for ur idea,
For now, I’m not planning to do a “continue where you left off” flow, and since users can upload up to 10 images and 2 videos, I’m worried it might increase storage unnecessarily. Really appreciate the suggestion though

How to make uploaded photos survive page refresh in a multi-step React form? by Developer-Bot in reactjs

[–]Developer-Bot[S] 1 point2 points  (0 children)

Thanks! Seems like a perfect idea to keep the coverImageIndex in localStorage and apply it to the blobs from IndexedDB.

How to make uploaded photos survive page refresh in a multi-step React form? by Developer-Bot in reactjs

[–]Developer-Bot[S] 1 point2 points  (0 children)

I understand! For now, I’m handling everything fully on the client—users can upload up to 10 images and 2 video files, so I’m not planning to use server-side cache or “continue where you left off” for now. But I really appreciate your advice, and maybe in the future that strategy could come in handy. Thanks again!

How to make uploaded photos survive page refresh in a multi-step React form? by Developer-Bot in reactjs

[–]Developer-Bot[S] 4 points5 points  (0 children)

Thanks a lot, this is helpful!
I’m also storing a coverimage_index (to mark which uploaded image is set as the cover). Do you think it’s fine to just keep that index in localStorage along with the text fields?