Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – setState best practice when storing api result in state react

Normally I try to use helper libraries like react-query to display and manipulate the data in an app, therefore minimising the usage of state. However right now I am working on an app which basically based on huge forms. I get a model, I parse it, populate the fields. The fields are also dynamic. All the changes have to be done under a save button so I need a state. Now I have some questions

Let’s say the model has a specific number of steps, which are represented as tabs and locales, set by the user before. After loading the data I need to sync the to the components state

  const [model, setModel] = React.useState<IModelData>()
  const [currentLocale, setCurrentLocale] = React.useState(defaultLocale)
  const [selectedStep, setSelectedStep] = React.useState<Step | null>(null)

  const { model: modelResp, loading } = useModelApiCall(id)
  useEffect(() => {
    setModel(modelResp)
    modelResp?.locales?.[0] && setCurrentLocale(modelResp.locales[0])
    modelResp?.steps[0] && setSelectedStep(modelResp.steps[0])
  }, [modelResp])

I honestly am not happy because there is a bunch of other logic except this. However since for most of the data I need to allow user input, I don’t find any other way.

  1. I might use react-hook-form to handle the manage state but I am afraid it might bottleneck because the model is huge and I need to parse the inputs
  2. Since I also need the possibility to allow user input, do you have any other ideas other than storing massive states?
  3. Do you find useful or useless to do modelResp?.locales?.[0] && setCurrentLocale(modelResp.locales[0]) rather than just setCurrentLocale(modelResp?.locales?.[0]). To me it makes sense because why would I want to risk settings state of undefined, but I value code that can be easily read and understood.

If this is it I will probably just separate it into a wrapper layout container that just gets the data and another one that creates and sync the states one layer below, but it will basically be the same thing a bit more readable.

Feel free to bounce any ideas

Tags:

2

Answers


  1. 0

    Why not just save your entire form in an object in one state, then use dot notation to set defaultValue(s) in your form? For example:

    <form onSubmit={(e)=>PostFormData(e, apiFormData, setApiFormData)>
  <input type="text" id="firstName" defaultValue={apiFormData.firstName?.toString()}/>
  <input type="text" id="lastName" defaultValue={apiFormData.lastName?.toString()}/>
</form>

    This way, you avoid having to create a state for every input in your form.

    Login or Signup to reply.
  2. 0

    Honestly I don’t know enough about React (TanStack) Query to say that it’s not a good idea for you to use it, but I do know that it’s powerful and quite a lot of people do. I’d personally look into it more before shrugging it off. Then again, I don’t know how much data you’re dealing with or what the limitations of React Query are. I know that when I’ve built out larger and larger forms, the amount of hooks I use becomes cumbersome and I’ve never found a really good way of incorporating many fields into one hook.

    I’m very much looking forward to the discussion surrounding this question!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search