Does React have something like Vue's keep-alive element?

Question

Vue keep-alive element will remember page state when back history page, hope React has something like that.

Answer 1

React does not have this type of feature, and a recent maintainer response on the same issue pretty strongly indicates they don't think this is a good idea. However, the same thread discusses a standard alternative, which is to implement your logic so that you are not deleting/creating the components but rather hiding and showing them. For instance, if you did something like this to support "tabs":

{this.state.activeTab === 1 &&
<MyFirstTabView/>
}
{this.state.activeTab === 2 &&
<MySecondTabView/>
}

then MyFirstTabView will obviously be destroyed when the second tab is selected. However, if you did it this way:

<MyFirstTabView className={this.state.activeTab === 1 ? 'active' : ''}/>
<MySecondTabView className={this.state.activeTab === 2 ? 'active' : ''}/>

and paired this with a CSS display: none or display: block rule, it would achieve a similar thing to Vue's keep-alive feature. It's not QUITE as efficient, but for common use-cases like tab switching, it's close.

Answer 2

React offers keep alive through a package. To install this package, To install Run:

npm install --save react-keep-alive

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Provider,
  KeepAlive,
} from 'react-keep-alive';
import Test from './views/Test';
 
ReactDOM.render(
  <Provider>
    <KeepAlive name="Test">
      <Test />
    </KeepAlive>
  </Provider>,
  document.getElementById('root'),
);