Rendering a component based on ajax request results?

Question

JavaScript

There is data requested from the server via useEffect( () => {fetch(...)} ) (once)
There is a function that processes this data, fitting it to the structure of the component, and executes setState() to apply the changes and render.

I understand that useEffect is not very friendly with setState, so the question is how to organize the chain [data acquisition] -> [data processing] -> [setState]?

Answer 1

I understand that useEffect is not very friendly with setState, so the question is how to organize the chain [data acquisition] -> [data processing] -> [setState]?

useEffect is quite friendly with another useState hook

const [data, setData] = React.useState(null)

React.useEffect(() => {
  const fetchedData = /* как-то данные получить */
  setData(fetchedData)
}, [])

return data ? <p>{ JSON.stringify(data) } </p> : null