changed from RFC to PureComponent

public/app/features/datasources/DataSourcesList.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames/bind';
 import DataSourcesListItem from './DataSourcesListItem';
 import { DataSource } from 'app/types';
@@ -9,8 +9,9 @@ export interface Props {
   layoutMode: LayoutMode;
 }
 
-const DataSourcesList: SFC<Props> = props => {
-  const { dataSources, layoutMode } = props;
+export class DataSourcesList extends PureComponent<Props> {
+  render() {
+    const { dataSources, layoutMode } = this.props;
 
     const listStyle = classNames({
       'card-section': true,
@@ -27,6 +28,7 @@ const DataSourcesList: SFC<Props> = props => {
         </ol>
       </section>
     );
-};
+  }
+}
 
 export default DataSourcesList;

public/app/features/datasources/DataSourcesListItem.tsx

@@ -1,13 +1,13 @@
-import React, { SFC } from 'react';
+import React, { PureComponent } from 'react';
 import { DataSource } from 'app/types';
 
 export interface Props {
   dataSource: DataSource;
 }
 
-const DataSourcesListItem: SFC<Props> = props => {
-  const { dataSource } = props;
-
+export class DataSourcesListItem extends PureComponent<Props> {
+  render() {
+    const { dataSource } = this.props;
     return (
       <li className="card-item-wrapper">
         <a className="card-item" href={`datasources/edit/${dataSource.id}`}>
@@ -29,6 +29,7 @@ const DataSourcesListItem: SFC<Props> = props => {
         </a>
       </li>
     );
-};
+  }
+}
 
 export default DataSourcesListItem;