Render child of MainLayout when state is changed

[joaquin-alfaro]

First of all, thanks a lot for the template!

Child of MainLayout not re-rendered

The root component of the child of MainLayout is not re-rendered after changing the state.
It affects just to the root component, the tree is re-rendered upon the state changes.

This behaviour is confusing when using hooks on nextjs pages because changes are not reflected in the page but in the children components.

How to reproduce

1. Create a nextjs page as below

const Home: NextPage = () => {
  const { address } = useAccount()
  return (
    <MainLayout>
      <HeaderMenu>
        <HeaderMenuButtons enabled={['auth']} />
      </HeaderMenu>
      <h1>### {address} ###</h1>
      <GetUserDataDemo />
   <MainLayout>
)

3. Connect your Elrond account
4. The value of address inside <h1> is not updated but the same value in component GetUserDataDemo is updated

[juliancwirko]

Thanks, I will test it as soon as possible. I need to check all possible implications.
There is probably too much 'optimization' there in the MainLayout.

[joaquin-alfaro]

Thanks @juliancwirko
Even it works, I am not sure of the implications of using the children parameter. I will check it more.