Multi-Step-Form, my solution with React, Typescript, and TailwindCss

Solution retrospective
Use reusable components
What challenges did you encounter, and how did you overcome them?Validate forms, and create a global state to manage data between forms
What specific areas of your project would you like help with?In form validation, the use of context + useReducer is correct :D
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@TranDanh1122
Nice work, but I'm sorry, I will say "No" to this solution.
When the state (context content) changes, everything (components, etc.) wrapped in the context provider will re-render.
That's the same problem I have now with this challenge, and I'm still reworking it.
Imagine if you have a city select, and the city list is fetched from an API. When the form re-renders with each character typed into another simple input field, the city list will re-fetch unnecessarily.
To solve this, use ref instead of state, or split the input into a separate component and use React.memo (you need make sure the props in input not change if another input action)
or just waiting for my solution
Have a nice day, keep going!
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord