setFilter with useDataGrid on mount
In the example for filtering in useDataGrid docs, handleFilter is called onChange. But how do I setFilter on mount?
Example from docs:
10 Replies
Hi @soto76. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To set a filter on mount, you can use the
useEffect
hook from React. This hook allows you to perform side effects, such as setting a filter, in function components. You can call setFilters
inside useEffect
with an empty dependency array []
, which means the effect will run once after the initial render.
Here's how you can modify your PostsList
component to set a filter on mount:
In this example, the useEffect
hook sets the filter to show only draft posts when the component mounts. The handleFilter
function will update this filter when the user interacts with the checkbox.
Please note that this will trigger a new fetch as every change in filters will do so as mentioned in the useTable documentation (https://refine.dev/docs/api-reference/core/hooks/useTable/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot•10mo ago
@kapa.ai this causes infinite re-renders
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion. The
setFilters
function updates the state and triggers a re-render. If it's called inside useEffect
without any dependencies, it will indeed cause an infinite loop of re-renders.
To avoid this, you can use a state variable to track if it's the first render. Here's how you can modify your PostsList
component to set a filter on mount without causing infinite re-renders:
In this example, a state initialRender
is used to track if it's the first render. When the component mounts, if it's the initial render, we set the filter and then set initialRender
to false
. This will prevent the useEffect
hook from running on subsequent re-renders.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot•10mo ago
@kapa.ai seems like it's still an infinite loop, I am getting thiese error messages now:
[Violation] 'click' handler took 224ms
[Violation] 'click' handler took 172ms
[Violation] 'message' handler took 189ms
[Violation] 'setTimeout' handler took 99ms
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion earlier. The issue you're experiencing might be due to the asynchronous nature of the
setFilters
function. When you call setFilters
and then immediately update the initialRender
state, it might not have finished updating the filters yet, causing the infinite loop.
To solve this, you can use the useRef
hook to track the initial render instead of useState
. The useRef
hook creates a mutable ref object whose .current
property is initialized with the passed argument (true
). The returned object will persist for the full lifetime of the component.
Here's how you can modify your PostsList
component:
In this example, initialRender
is a ref object. When the component mounts, if initialRender.current
is true
, we set the filter and then set initialRender.current
to false
. This will prevent the useEffect
hook from running on subsequent re-renders.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below
silky-coral•10mo ago
Hello @soto76 you can use
initialFilters
prop for that. https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#filtersinitialuseDataGrid | refine
By using useDataGrid, you can get properties that are compatible with MUI X
component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses useList
for the fetch.correct-apricot•10mo ago
@batuhanw hi, sorry i forgot to mark this as resolved! I figured it out in the dataProvider support channel. But thanks!