0

Is there a way in React to just refresh a component not the window but the component itself? This is so I can re-trigger a react-query. I know I can use useEffect() but what would be the way to do it?

So I know I could do, something like:

useEffect(() => {
     setFetchData(result);
}, [result]);

This would trigger the component to re-render when result changes. But how can you have a button that would manually refresh the component or re-render it.

Sole
  • 3,100
  • 14
  • 58
  • 112
  • 2
    Does this answer your question? [Can you force a React component to rerender without calling setState?](https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate) – Jkarttunen Nov 03 '21 at 11:49

2 Answers2

0

If you are trying to refresh the component just to re-trigger a query from react-query, you'd better use refetch function provided by useQuery hook.

const { data, refetch, ... } = useQuery(...);

return (
  <>
    {(data?.yourQuery?.results || []).map(result => ...)}
    <button onClick={refetch}>Refetch!</button>
  </>
)

If there are some changes of data after calling refetch, the component will be automatically rerendered.

Ryan Ro
  • 304
  • 2
  • 11
  • Is there a way though to show the loading state as apposed to the 'Updating' state – Sole Nov 03 '21 at 12:04
  • Refetch function does refetch query but how could I refresh the component based on that? – Sole Nov 03 '21 at 12:05
  • `useQuery` also provides `isLoading` and `isRefetching` boolean states, so you can conditionally render loading components using them. Referring to this [docs](https://react-query.tanstack.com/reference/useQuery) will help you understand how this hook works. – Ryan Ro Nov 03 '21 at 12:09
  • After you `refetch` the query, there will be (or not, sometimes...) updates of `data`. Then you show results of the query inside your component using `data`. Because `data` is updated, so is the component. It will be re-rendered automatically. – Ryan Ro Nov 03 '21 at 12:12
  • I have created an example here: https://stackblitz.com/edit/react-ts-jfq8ve?file=index.tsx I want it so the query goes into the loading state not updating state when the button is clicked – Sole Nov 03 '21 at 12:39
  • Do you mean in that example you want to render “Loading data…” without list of data when the query is being re-triggered? – Ryan Ro Nov 03 '21 at 13:51
  • Yes that is correct – Sole Nov 03 '21 at 14:26
  • Could you update the stackblitz example? – Sole Nov 03 '21 at 16:41
  • Sorry for being late. https://stackblitz.com/edit/react-ts-j87pub?file=index.tsx I think this might help you. – Ryan Ro Nov 04 '21 at 00:26
  • Can you please add as answer to: https://stackoverflow.com/questions/69825205/manually-refresh-react-query-onclick-with-react/69825333#69825333 – Sole Nov 04 '21 at 10:35
0

You can do it like this:

const [reload, setReload] = useState()
useEffect(() => {
     // Add your code here
}, [reload]);

return (
 <button onClick={() => setReload(!reload)} >Reload</button>
);

And anytime you click the button it will execute the code inside the useEffect and update the component.

Danilson Reis
  • 111
  • 2