OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Debounce library hook of a lib that make API call on React

  • Thread starter Thread starter Marco Cesarato
  • Start date Start date
M

Marco Cesarato

Guest
I'm using a library that connect to a client with a provider and offer an hook that make an API call and returns some data (similar to react-query).

Sometimes happen that some parents components, of the component where I use that hook, refresh their state so the hook called and then it make a lot of API calls.

I can't modify the library hook and I can't create nested hooks (react standard rules) so how can I debounce an hook that make an API call? Is there a way to do this?

Example:

Using Chakra UI hook useBreakpointValue and resizing the window (for example dragging console) the component refresh and the useAPI is recalled a lot of time.

Code:
function ParentComponent() {
    const mode = useBreakpointValue({base: false, lg: true});
    return <Component mode={mode} />;
}

function Component({mode}) {
  const {data, isLoading} = useAPI(); // Need to be debounced

  if(isLoading) return <Loader />;
  return (<div>{data.result.map((row) => <Row item={row} mode={mode} />)}</div>)  
}

<p>I'm using a library that connect to a client with a provider and offer an hook that make an API call and returns some data (similar to react-query).</p>
<p>Sometimes happen that some parents components, of the component where I use that hook, refresh their state so the hook called and then it make a lot of API calls.</p>
<p>I can't modify the library hook and I can't create nested hooks (react standard rules) so how can I debounce an hook that make an API call? Is there a way to do this?</p>
<p><strong>Example:</strong></p>
<p>Using Chakra UI hook <code>useBreakpointValue</code> and resizing the window (for example dragging console) the component refresh and the <code>useAPI</code> is recalled a lot of time.</p>
<pre class="lang-js prettyprint-override"><code>function ParentComponent() {
const mode = useBreakpointValue({base: false, lg: true});
return <Component mode={mode} />;
}

function Component({mode}) {
const {data, isLoading} = useAPI(); // Need to be debounced

if(isLoading) return <Loader />;
return (<div>{data.result.map((row) => <Row item={row} mode={mode} />)}</div>)
}

</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top