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.
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.
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.