maiden parrot
When I am adding menu or changes with aside. Its rendering whole component AppShell (with header, footer and other props).
Is there any way or can we prevent header/footer re-render on aside changes.
Please check below code
https://codesandbox.io/s/hungry-lucy-k9rqyo?file=/src/Layout.tsx
https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/AppShell/AppShell.tsx#L80
@final totem I have created forum question for this issue. Also added codesandbox example.
maiden parrot
<@&892757360957866014> Is there any way to handle this?
unreal crescent
did you try memoize them? If you're changing state in scope of AppShell react rerender components in tree below it - that's how react works basically
final totem
yeah he attempted to memoize them before in #854810300876062773
the aside/header/footer props are all inside a single Box so i think any of these props changing is going to cause a full re-render that is unavoidable
not sure if memo will stop it
@maiden parrot unless the others know of any approach i guess you have two options
to recreate a component, or consider if you actually need to
even if it is re rendering, is the performance considerably impacted?
unreal crescent
footer={
<Footer height={60} fixed>
<CommonFooter />
</Footer>
}
could be changed into
const MemoizedFooter = memo(() => (
<Footer height={60} fixed>
<CommonFooter />
</Footer>
))
im pretty sure that would prevent rerendering unless Footer component doesn't depends of some kind context inside AppShell(I don't remember how it works). Otherwise it will keep rerendering its children so only think we can memo in this case is CommonFooter component
and yes, does it impact in any way for the general performance of application? Rerenders are NOT a bad thing in most of the situations
final totem
yeah i don't think 1 re-render will have heavy performance implications
maiden parrot
```
footer={
<Footer height={60} fixed>
<CommonFooter />
</Footer>
}
c...
I have tried with memo, but its not working.
maiden parrot
yeah i don't think 1 re-render will have heavy performance implications
I am having complex logic like select, logo, etc in header. Its re-rendering those.
unreal crescent
im finishing my job in an hour so I will look into it
final totem
I am having complex logic like select, logo, etc in header. Its re-rendering tho...
they are re-rendering but not re-mounting though
you are using useEffect without a dependency array, if you add [], you see how the useEffect only fires once
maiden parrot
ok
maiden parrot
you are using useEffect without a dependency array, if you add `[]`, you see how...
In my current project, I am using Select Component with header and fetching values via react-query.
Due to this header re-render, react-query is fetching data on each page route.
final totem
could you move the query higher up to avoid a refetch?
such as within the appshell itself, or above the appshell
maiden parrot
such as within the appshell itself, or above the appshell
I can't 😦
tired bloom