<KeepAlive id="unique-const-id">
  <Child1 />
  {/* ... */}
</KeepAlive>

import { render } from 'solid-js/web';
import App from './App';
import { KeepAliveProvider } from 'solid-keep-alive';

render(
  () => (
    <KeepAliveProvider>
      <App />
    </KeepAliveProvider>
  ),
  document.getElementById('root')
);

// ...
const [selected, setSelected] = createSignal('first');

return (
  <>
    <Switch>
      <Match when={selected() === 'first'}>
        <KeepAlive id="first-tab">
          {/* everything inside here is kept alive, even after Match unmounts */}
          <FirstView />
          <SomeOtherComponent />
        </KeepAlive>
      </Match>
      <Match when={selected() === 'second'}>
        <KeepAlive id="second-tab">
          {/* this too */}
          <SecondView />
        </KeepAlive>
      </Match>
      <Match when={selected() === 'third'}>
        {/* this is not kept alive, everything here is unmounted immediately */}
        <ThirdView />
      </Match>
    </Switch>
    {/* ... */}
  </>
);

<KeepAliveProvider maxElements={20}>
  <App />
</KeepAliveProvider>

import { useKeepAlive } from 'solid-keep-alive';

const App = () => {
  const [elements, { removeElement }] = useKeepAlive();
  const clickHandler = () => {
    // manually remove cached element where id is 'home-view'
    removeElement('home-view');
  };
  // ...
};