How can I prevent this in my large scale react app ?

• TanStack Query

  56 39,711 9.8 TypeScript

  🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

  

This looks like a very large component. Have your state as close as possible to where it is being used. Just split it up into multiple components where each component handles one thing. Also, for any state that handles data from the server, use react-query. These 2 things can get you pretty far.

• react-hook-form

  210 39,505 8.9 TypeScript

  📋 React Hooks for form state management and validation (Web + React Native)

  

https://react-hook-form.com can help a bit. It’s literally one of the best tools for pages with lots of inputs.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• zustand

  248 42,526 8.8 TypeScript

  🐻 Bear necessities for state management in React

  

could be a non-issue, could be the case of not having proper state management. in case of the latter i'd try something like zustand for react (https://github.com/pmndrs/zustand)

• react-easy-state

  13 2,560 0.0 JavaScript

  Simple React state management. Made with ❤️ and ES6 Proxies.

  

If you want to try something a bit different with regards to state management, you can try: https://github.com/RisingStack/react-easy-state

Suggest a related project