Heya!

I have a component that's rendering a different layout, depending on the width of the screen.
Though, I have a small issue. It's not the end of the world, but I'd like to avoid it regardless:

When changing the width of the screen, I return a different layout, and thus, the children prop is being re-rendered.
I've been trying to find a solution to avoid this re-render, since it's also fetching some data, which is kinda slow.
If anyone has any idea of how I could do that, it would be great.

This is my current code:

  // If mobile, we want the layout to be like this:
  // Sidebar | Page Title
  // Main Content
  // Main Content
  if(isTabletOrMobile) {
    return (
      <div className="flex flex-col">
        <div className="flex flex-row">
          <Sidebar />
          
          <PageTitle title="Add Service Call" />
        </div>

        <div className="w-screen pl-4 pr-4">
          <main className="bg-white rounded shadow p-4 mt-4 w-full" dir="rtl">
            { children }
          </main>
        </div>
      </div>
    );
  }

  // If not mobile, we want the layout to be like this:
  // Sidebar | Page Title
  // Sidebar | Main Content
  // Sidebar | Main Content
  return (
    <div className="flex flex-row">
      <Sidebar />

      <div className="flex flex-col w-full mr-4 ml-4">
        <div className="mt-4">
          <PageTitle title="Add Service Call" />
        </div>

        <main className="bg-white rounded shadow p-4 mt-4 w-full" dir="rtl">
          { children }
        </main>
      </div>
    </div>
  );

So as you can see, I can't use conditional rendering to have

{ children }

appear only once in my code, resulting in the re-rendering.

Thanks again! ❤️