Closed orangecoloured closed 2 years ago
It seems like you're creating a new A
function on every render. Components should never be created within another component or render method, since that breaks referential equality and causes them to remount on every update.
Does not work | Works |
---|---|
```js
function App() {
const A: FunctionalComponent = () => {
useEffect(() => {
console.log('MOUNTED')
return (): void => {
console.log('UNMOUNTED')
}
}, [])
return yo
}
return (
|
```js
const A: FunctionalComponent = () => {
useEffect(() => {
console.log('MOUNTED')
return (): void => {
console.log('UNMOUNTED')
}
}, [])
return yo
}
function App() {
return (
|
@developit I think you are right. I've already updated my code to avoid this re-mount, but probably the previous logic was re-creating the component. Thank you.
I have this state in my root component which is passed then as a context value
On each update components inside the
<Router>
get re-mounted. Components sitting outside of the<Router>
act normal.So in the above example on each
contextValue
update you getUNMOUNTED
in the console. Is there a way to fix this behaviour? Or am I doing something wrong?