correct-apricot•5mo ago

mantine problem

Hello Why when i click refresh btn in edit page it causes max depth re rendering even if the page is empty I use mantine as ui library

3 Replies

kapa.ai•5mo ago

Hi @saji_nael. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello, It sounds like you are experiencing an issue with the RefreshButton in your edit page when using Mantine as the UI library. This could be related to how the RefreshButton is implemented or how the state is managed in your application. Here are a few steps and considerations to help you troubleshoot and potentially resolve the issue: 1. Ensure Proper Implementation of RefreshButton: Make sure you are using the RefreshButton correctly as per the documentation. Here is an example of how to use the RefreshButton in a Show component, which can be adapted for the Edit component:

   import { useShow } from "@refinedev/core";  
   import {  
     Show,  
     MarkdownField,  
     RefreshButton,  
   } from "@refinedev/mantine";  
   import { Title, Text } from "@mantine/core";  
   
   const PostShow: React.FC = () => {  
     const { queryResult } = useShow<IPost>();  
     const { data, isLoading } = queryResult;  
     const record = data?.data;  
   
     return (  
       <Show headerButtons={<RefreshButton />} isLoading={isLoading}>  
         <Title order={5}>Id</Title>  
         <Text mt="sm">{record?.id}</Text>  
   
         <Title mt="sm" order={5}>  
           Title  
         </Title>  
         <Text mt="sm">{record?.title}</Text>  
   
         <Title mt="sm" order={5}>  
           Content  
         </Title>  
         <MarkdownField value={record?.content} />  
       </Show>  
     );  
   };

   import { useShow } from "@refinedev/core";  
   import {  
     Show,  
     MarkdownField,  
     RefreshButton,  
   } from "@refinedev/mantine";  
   import { Title, Text } from "@mantine/core";  
   
   const PostShow: React.FC = () => {  
     const { queryResult } = useShow<IPost>();  
     const { data, isLoading } = queryResult;  
     const record = data?.data;  
   
     return (  
       <Show headerButtons={<RefreshButton />} isLoading={isLoading}>  
         <Title order={5}>Id</Title>  
         <Text mt="sm">{record?.id}</Text>  
   
         <Title mt="sm" order={5}>  
           Title  
         </Title>  
         <Text mt="sm">{record?.title}</Text>  
   
         <Title mt="sm" order={5}>  
           Content  
         </Title>  
         <MarkdownField value={record?.content} />  
       </Show>  
     );  
   };

Source (https://refine.dev/docs/ui-integrations/mantine/components/buttons/refresh-button/) 2. Check for Deprecated Props: Ensure you are not using deprecated props like resourceNameOrRouteName. Instead, use the resource prop as recommended in the documentation. Source (https://refine.dev/docs/ui-integrations/mantine/components/buttons/refresh-button/#resourcenameorroutename-) 3. Manage Loading State: Ensure that the isLoading property is managed correctly to avoid unnecessary re-renders. Here is an example of how to toggle the loading state in an Edit component:

   import { Edit } from "@refinedev/mantine";  
   
   const PostEdit: React.FC = () => {  
     return (  
       <Edit isLoading={true}>  
         <p>Rest of your page here</p>  
       </Edit>  
     );  
   };

   import { Edit } from "@refinedev/mantine";  
   
   const PostEdit: React.FC = () => {  
     return (  
       <Edit isLoading={true}>  
         <p>Rest of your page here</p>  
       </Edit>  
     );  
   };

Source (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/edit/#isloading) 4. Investigate State Management: If the issue persists, it might be related to how state is managed in your application. Ensure that the state updates are not causing unnecessary re-renders. If you continue to face issues, you might want to check the GitHub issues (https://github.com/refinedev/refine/issues) for similar problems or consider opening a new issue with detailed information about your setup and the problem. I hope this helps! If you need further assistance, please provide more details about your implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@1000087684632547538> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricotOP•5mo ago

But the page has no content I just try clicking the button and it causes rerendering problem