diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js
index ea3c1f0..7394070 100644
--- a/packages/react-bootstrap-table2-editor/src/context.js
+++ b/packages/react-bootstrap-table2-editor/src/context.js
@@ -16,6 +16,7 @@ export default (
     static propTypes = {
       data: PropTypes.array.isRequired,
       selectRow: PropTypes.object,
+      // eslint-disable-next-line react/no-unused-prop-types
       options: PropTypes.shape({
         mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
         onErrorMessageDisappear: PropTypes.func,
@@ -43,7 +44,8 @@ export default (
       };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.cellEdit && isRemoteCellEdit()) {
         if (nextProps.cellEdit.options.errorMessage) {
           this.setState(() => ({
diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js
index 2a0d85b..0fdfac3 100644
--- a/packages/react-bootstrap-table2-editor/src/editing-cell.js
+++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js
@@ -15,7 +15,7 @@ import EditorIndicator from './editor-indicator';
 import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
 
 export default (_, onStartEdit) =>
-  class EditingCell extends Component {
+  (class EditingCell extends Component {
     static propTypes = {
       row: PropTypes.object.isRequired,
       rowIndex: PropTypes.number.isRequired,
@@ -51,7 +51,8 @@ export default (_, onStartEdit) =>
       };
     }
 
-    componentWillReceiveProps({ message }) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps({ message }) {
       if (_.isDefined(message)) {
         this.createTimer();
         this.setState(() => ({
@@ -223,4 +224,4 @@ export default (_, onStartEdit) =>
         </td>
       );
     }
-  };
+  });
diff --git a/packages/react-bootstrap-table2-editor/test/context.test.js b/packages/react-bootstrap-table2-editor/test/context.test.js
index 57b56bf..65e9d2c 100644
--- a/packages/react-bootstrap-table2-editor/test/context.test.js
+++ b/packages/react-bootstrap-table2-editor/test/context.test.js
@@ -117,7 +117,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().componentWillReceiveProps({});
+        wrapper.instance().UNSAFE_componentWillReceiveProps({});
       });
 
       it('should not set state.message', () => {
@@ -138,7 +138,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().componentWillReceiveProps({
+        wrapper.instance().UNSAFE_componentWillReceiveProps({
           cellEdit: cellEditFactory(defaultCellEdit)
         });
       });
@@ -164,7 +164,7 @@ describe('CellEditContext', () => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
           wrapper.render();
-          wrapper.instance().componentWillReceiveProps({
+          wrapper.instance().UNSAFE_componentWillReceiveProps({
             cellEdit: cellEditFactory({
               ...defaultCellEdit,
               errorMessage: message
@@ -190,7 +190,7 @@ describe('CellEditContext', () => {
         beforeEach(() => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
-          wrapper.instance().componentWillReceiveProps({
+          wrapper.instance().UNSAFE_componentWillReceiveProps({
             cellEdit: cellEditFactory({ ...defaultCellEdit })
           });
           wrapper.update();
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index a359a95..5bbf401 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -41,7 +41,8 @@ class TextFilter extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.defaultValue !== this.props.defaultValue) {
       this.applyFilter(nextProps.defaultValue);
     }
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 013be6e..44824ee 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -37,7 +37,8 @@ export default (
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps(nextProps) {
       // let nextData = nextProps.data;
       if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
         this.doFilter(nextProps, this.isEmitDataChange);
diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js
index fbc849f..fbb2200 100644
--- a/packages/react-bootstrap-table2-filter/test/components/text.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/text.test.js
@@ -144,7 +144,7 @@ describe('Text Filter', () => {
         <TextFilter onFilter={ onFilter } column={ column } />
       );
       instance = wrapper.instance();
-      instance.componentWillReceiveProps(nextProps);
+      instance.UNSAFE_componentWillReceiveProps(nextProps);
     });
 
     it('should setting state correctly when props.defaultValue is changed', () => {
diff --git a/packages/react-bootstrap-table2-paginator/src/data-context.js b/packages/react-bootstrap-table2-paginator/src/data-context.js
index 654e9f8..153884c 100644
--- a/packages/react-bootstrap-table2-paginator/src/data-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/data-context.js
@@ -21,8 +21,9 @@ class PaginationDataProvider extends Provider {
     isRemotePagination: PropTypes.func.isRequired
   }
 
-  componentWillReceiveProps(nextProps) {
-    super.componentWillReceiveProps(nextProps);
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    super.UNSAFE_componentWillReceiveProps(nextProps);
     const { currSizePerPage } = this;
     const { custom, onPageChange } = nextProps.pagination.options;
 
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
index fcc9e11..00e67df 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import pageResolver from './page-resolver';
 
 export default WrappedComponent =>
-  class PaginationHandler extends pageResolver(Component) {
+  (class PaginationHandler extends pageResolver(Component) {
     constructor(props) {
       super(props);
       this.handleChangePage = this.handleChangePage.bind(this);
@@ -12,7 +12,8 @@ export default WrappedComponent =>
       this.state = this.initialState();
     }
 
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const { dataSize, currSizePerPage } = nextProps;
       if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
         const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
@@ -73,5 +74,5 @@ export default WrappedComponent =>
         />
       );
     }
-  };
+  });
 
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 3f616cb..df52fad 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -45,7 +45,8 @@ class StateProvider extends React.Component {
     this.dataChangeListener.on('filterChanged', this.handleDataSizeChange);
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { custom } = nextProps.pagination.options;
 
     // user should align the page when the page is not fit to the data size when remote enable
diff --git a/packages/react-bootstrap-table2-paginator/test/data-context.test.js b/packages/react-bootstrap-table2-paginator/test/data-context.test.js
index ba920cc..48dd1aa 100644
--- a/packages/react-bootstrap-table2-paginator/test/data-context.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/data-context.test.js
@@ -174,7 +174,7 @@ describe('PaginationDataContext', () => {
           data: [],
           pagination: { ...defaultPagination }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should reset currPage to first page', () => {
@@ -195,7 +195,7 @@ describe('PaginationDataContext', () => {
             data: [],
             pagination: { ...defaultPagination, options: { onPageChange } }
           };
-          instance.componentWillReceiveProps(nextProps);
+          instance.UNSAFE_componentWillReceiveProps(nextProps);
         });
 
         it('should call options.onPageChange correctly', () => {
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js
index 4c295a1..b9216d1 100644
--- a/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js
@@ -164,13 +164,13 @@ describe('paginationHandler', () => {
       });
 
       it('should setting correct state.totalPages', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         expect(instance.state.totalPages).toEqual(
           instance.calculateTotalPage(nextProps.currSizePerPage));
       });
 
       it('should setting correct state.lastPage', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
         expect(instance.state.lastPage).toEqual(
           instance.calculateLastPage(totalPages));
@@ -186,13 +186,13 @@ describe('paginationHandler', () => {
       });
 
       it('should setting correct state.totalPages', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         expect(instance.state.totalPages).toEqual(
           instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
       });
 
       it('should setting correct state.lastPage', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         const totalPages = instance.calculateTotalPage(
           nextProps.currSizePerPage, nextProps.dataSize);
         expect(instance.state.lastPage).toEqual(
diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
index bc4a91c..c17630e 100644
--- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
@@ -156,7 +156,7 @@ describe('PaginationStateContext', () => {
           data,
           pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, totalSize: 50 } }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should always reset currPage and currSizePerPage', () => {
@@ -181,7 +181,7 @@ describe('PaginationStateContext', () => {
             options: { page: 3, sizePerPage: 5, custom: true, totalSize: 50 }
           }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should always reset currPage and currSizePerPage', () => {
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index 70909e0..fba26dc 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -34,7 +34,8 @@ class SearchBar extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ value: nextProps.searchText });
   }
 
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js
index bfed70d..fd7474e 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/context.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js
@@ -35,7 +35,8 @@ export default (options = {
       this.state = { data: initialData };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.searchText !== this.props.searchText) {
         if (isRemoteSearch()) {
           handleRemoteSearchChange(nextProps.searchText);
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 692c29f..f2e490a 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -18,7 +18,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     this.validateProps();
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.onDataSizeChange && !nextProps.pagination) {
       if (nextProps.data.length !== this.props.data.length) {
         nextProps.onDataSizeChange({ dataSize: nextProps.data.length });
diff --git a/packages/react-bootstrap-table2/src/contexts/data-context.js b/packages/react-bootstrap-table2/src/contexts/data-context.js
index 3394c7a..ca01393 100644
--- a/packages/react-bootstrap-table2/src/contexts/data-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/data-context.js
@@ -12,7 +12,8 @@ export default () => {
 
     state = { data: this.props.data };
 
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps(nextProps) {
       this.setState(() => ({ data: nextProps.data }));
     }
 
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 1793dfb..109c675 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -14,7 +14,7 @@ import { BootstrapContext } from './bootstrap';
 import dataOperator from '../store/operators';
 
 const withContext = Base =>
-  class BootstrapTableContainer extends remoteResolver(Component) {
+  (class BootstrapTableContainer extends remoteResolver(Component) {
     constructor(props) {
       super(props);
       this.DataContext = createDataContext();
@@ -83,7 +83,8 @@ const withContext = Base =>
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line camelcase, react/sort-comp
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (!nextProps.pagination && this.props.pagination) {
         this.PaginationContext = null;
       }
@@ -374,6 +375,6 @@ const withContext = Base =>
         </BootstrapContext.Provider>
       );
     }
-  };
+  });
 
 export default withContext;
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index e1c5e47..46273c7 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -16,7 +16,8 @@ class RowExpandProvider extends React.Component {
   state = { expanded: this.props.expandRow.expanded || [],
     isClosing: this.props.expandRow.isClosing || [] };
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.expandRow) {
       const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
       const isClosing = this.state.expanded.reduce((acc, cur) => {
diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js
index 573c54f..a973536 100644
--- a/packages/react-bootstrap-table2/src/contexts/selection-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js
@@ -19,7 +19,8 @@ class SelectionProvider extends React.Component {
     this.selected = props.selectRow.selected || [];
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.selectRow) {
       this.selected = nextProps.selectRow.selected || this.selected;
     }
diff --git a/packages/react-bootstrap-table2/test/contexts/data-context.test.js b/packages/react-bootstrap-table2/test/contexts/data-context.test.js
index 0761640..7e6dab3 100644
--- a/packages/react-bootstrap-table2/test/contexts/data-context.test.js
+++ b/packages/react-bootstrap-table2/test/contexts/data-context.test.js
@@ -81,7 +81,7 @@ describe('DataContext', () => {
 
     beforeEach(() => {
       wrapper = shallow(shallowContext());
-      wrapper.instance().componentWillReceiveProps({
+      wrapper.instance().UNSAFE_componentWillReceiveProps({
         data: newData
       });
     });
diff --git a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js
index 1196088..107c4fc 100644
--- a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js
+++ b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js
@@ -99,7 +99,7 @@ describe('DataContext', () => {
 
     beforeEach(() => {
       wrapper = shallow(shallowContext());
-      wrapper.instance().componentWillReceiveProps({
+      wrapper.instance().UNSAFE_componentWillReceiveProps({
         selectRow: newSelectRow
       });
     });
@@ -115,7 +115,7 @@ describe('DataContext', () => {
           ...defaultSelectRow,
           selected: defaultSelected
         }));
-        wrapper.instance().componentWillReceiveProps({
+        wrapper.instance().UNSAFE_componentWillReceiveProps({
           selectRow: defaultSelectRow
         });
       });
@@ -128,7 +128,7 @@ describe('DataContext', () => {
     describe('if nextProps.selectRow is not existing', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext());
-        wrapper.instance().componentWillReceiveProps({});
+        wrapper.instance().UNSAFE_componentWillReceiveProps({});
       });
 
       it('should not set this.selected', () => {