Abstraction Patterns for useQuery states

[rohitpotato]

The most typical way of rendering the component goes something like this:

const query = useQuery(...)

if(query.isLoading) {
  return 'Loading...'
}

if(query.isError) {
  return 'Error...'
}

return <div>{REAL_QUERY_DATA}</div>

This logic has to repeated for every component.

Is there a way to extract this logic? What I mean by that is showing a loader until the query data loads and then displaying the real component with the data.

Any such patterns where we dont have to write multiple if statements and directly render the children while maintaining the loading and error states.

Thanks in advance!

[TkDodo]

Enabling suspense would show the fallback for loading and uses ErrorBoundary for errors.

[rohitpotato]

I have noticed that even though the children are executed everytime, they are not visible on the UI. Why is that?

Check out this sandbox for more clarity y: https://codesandbox.io/s/react-composition-and-render-prop-tyyzh?file=/src/App.js

And Thank you @TkDodo for keeping up with this conversation. This surely helped in clearing some of the fundamentals for me.

[TkDodo]

I have noticed that even though the children are executed everytime, they are not visible on the UI. Why is that?

because you only return the children from the wrapper component inside of if (query.isSuccess). components are just functions. The children are created and passed to the wrapper, but if the wrapper chooses to discard them, then they are not visible

[rohitpotato]

Hmmm, it seems like I am not able to grasp the concept properly. I am thinking if the children are executed at every render resulting in Cant read property of undefined , then why does the the Parent component does not render those children even after I do optional chaining. In the sandbox we can see the logs, that means at every render it's executing.

And, if the Wrapper only renders the children if(query.isSuccess) then the data should be available.

My confusion is that if the logs are appearing, then why not the actual elements that are also being executed.

const Parent = () => {
    const someData  = useQuery();
    return (
        <Wrapper {...someData}>
              <div>{someData?.message}</div>
       <Wrapper />
    )
}

[TkDodo]

My confusion is that if the logs are appearing, then why not the actual elements that are also being executed.

They are "executed". Let me give you a different example:

function MyComponent() {
  const compute = () => 'Hello World'
   
  const result = compute()
  return 'Foo Bar'
}

If you look at this code, you will see that the function named compute is executed - if you put a log there, it will print, but if you then take a look at the result of MyComponent, it is nowhere to be found, because I discard it with the return statement. Basically, I am unnecessarily running it.

Now a JSX expression is nothing more than a function call:

<div>Hello World

is the same as

React.createElement('div', {}, 'Hello World')

the function call will be executed, but what happens with the result of it depends on what you do with children. The bottom line is: if you have a component that doesn't return children, they will not be shown.

[rohitpotato]

@TkDodo really good explanation. It didn't hit me and I completely forgot about React.createElement. Thanks for having this long conversation. Really did help me out and hopefully will help others to come up with more abstraction patterns.

The render prop method looks good to me and my requirement, I'll be using that. :)