A Quick Trick to Preserve State Beyond Component Lifecycle

To preserve some state across navigating out and back to a page, the options we have are:

The component static variable method feels a bit drafty, I don't know if anybody formally use this. On the flip side, I don't see a problem neither.

Features

While considering:

Why it works

Implementation

const LIST_BY = {
  TOPIC: 'topic',
  YEAR: 'date',
};
const DEFAULT_LIST_BY = LIST_BY.TOPIC;
const HomePageListing = () => {
  const [listBy, setListBy] = React.useState(HomePageListing.__preservedListBy || DEFAULT_LIST_BY);
  return <section>
    <Switch 
      onChange={(newListBy) => {
        HomePageListing.__preservedListBy(newListBy);
        setListBy(newListBy);
      }} 
      options={[LIST_BY.TOPIC, LIST_BY.YEAR]}
    />
    {listBy === LIST_BY.TOPIC ? <TopicListing /> : <YearListing />}
  </section>;
};