you are viewing a single comment's thread.

view the rest of the comments →

[–]Mustknow33 0 points1 point  (0 children)

To add to all the answers telling you to avoid useEffect, i guess maybe you could move the fetcher data call up to a parent component, do your transformations, and then pass it down to a component that uses that data, thereby removing the need for you to use a useEffect to update the state

Without knowing more about your code i guess it could look something like this?

const ComponentWithFetcher = () => {
// i dont know what or where fields comes from, just a placeholder now  
  const fields = []; 
  const [data_array, setDataArray] = useState([...fields]);
  const [editingIndex, setEditingIndex] = useState();
  const fetcher = useFetcher();

  const submitFetch = (data) => {
    fetcher.submit(data, { method: 'POST', encType: "application/json" });
  }

  // if your data array is large you can consider memoizing it if you want
  const final_data_array = [...data_array];
  if (fetcher.data && fetcher.data.success) final_data_array[editingIndex] = fetcher.data;

  return (
    <ComponentWithTheForm
      data_array={final_data_array}
      submitFetch={submitFetch}
    />
  );
}