From fdadfeb8e6a138469a11c2f1f2c5defc5939c386 Mon Sep 17 00:00:00 2001
From: Katarzyna Zadurska <katarzyna.zadurska@allegro.pl>
Date: Thu, 10 Mar 2022 15:41:55 +0100
Subject: [PATCH] Replace react SFC

Functional components cannot be consideres stateless
---
 CONTRIBUTING.md                                    |  2 +-
 package-lock.json                                  | 14 +++++++-------
 package.json                                       |  4 ++--
 .../auto-refresh-menu/auto-refresh-menu.tsx        |  2 +-
 .../components/bubble-title/bubble-title.tsx       |  2 +-
 .../components/clearable-input/clearable-input.tsx |  2 +-
 .../components/color-legend/color-legend.tsx       |  2 +-
 src/client/components/color-swabs/color-swabs.tsx  |  2 +-
 src/client/components/debug-menu/debug-menu.tsx    |  2 +-
 src/client/components/delta/delta.tsx              |  2 +-
 .../dimension-actions-menu.tsx                     |  4 ++--
 .../dimension-list-tile/dimension-item.tsx         |  2 +-
 .../components/drag-indicator/drag-indicator.tsx   |  2 +-
 src/client/components/filter-menu/filter-menu.tsx  |  2 +-
 .../time-filter-menu/time-filter-menu.tsx          |  2 +-
 .../time-filter-menu/time-shift-selector.tsx       |  2 +-
 src/client/components/filter-tile/add-filter.tsx   |  2 +-
 src/client/components/filter-tile/filter-tile.tsx  |  2 +-
 src/client/components/filter-tile/filter-tiles.tsx |  2 +-
 .../components/filter-tile/partial-filter-tile.tsx |  2 +-
 src/client/components/grid-border/grid-border.tsx  |  4 ++--
 src/client/components/grid-lines/grid-lines.tsx    |  2 +-
 src/client/components/header-bar/header-bar.tsx    |  2 +-
 .../components/highlight-modal/highlight-modal.tsx |  2 +-
 .../highlight-string/highlight-string.tsx          |  2 +-
 .../string-input-with-presets.tsx                  |  2 +-
 .../components/markdown-node/markdown-node.tsx     |  2 +-
 .../add-arithmetic-operation.tsx                   |  2 +-
 .../measure-actions-menu/add-measure-series.tsx    |  2 +-
 .../measure-actions-menu/add-percent-series.tsx    |  2 +-
 .../measure-actions-menu/add-quantile-series.tsx   |  2 +-
 .../measure-actions-menu/measure-actions-menu.tsx  |  2 +-
 .../measure-bubble-content.tsx                     |  2 +-
 .../components/measures-tile/measure-item.tsx      |  2 +-
 .../components/message-card/message-card.tsx       |  2 +-
 .../components/message-panel/message-panel.tsx     |  4 ++--
 src/client/components/message/message.tsx          |  2 +-
 src/client/components/nav-list/nav-list.tsx        |  2 +-
 src/client/components/nav-logo/nav-logo.tsx        |  2 +-
 .../components/no-data/data-cube-not-found.tsx     |  2 +-
 .../pinboard-measure-tile.tsx                      |  2 +-
 .../components/pinboard-panel/pinboard-tiles.tsx   |  2 +-
 src/client/components/pinboard-tile/data-rows.tsx  |  4 ++--
 .../components/pinboard-tile/pinboard-dataset.tsx  |  2 +-
 .../components/pinboard-tile/selectable-row.tsx    |  2 +-
 .../components/pinboard-tile/selectable-rows.tsx   |  2 +-
 src/client/components/pinboard-tile/text-row.tsx   |  2 +-
 src/client/components/pinboard-tile/text-rows.tsx  |  2 +-
 .../preview-string-filter-menu/preview-list.tsx    |  2 +-
 src/client/components/query-error/query-error.tsx  |  2 +-
 .../components/segment-bubble/segment-bubble.tsx   |  4 ++--
 .../selectable-string-filter-menu/string-value.tsx |  2 +-
 .../string-values-list.tsx                         |  2 +-
 .../series-bubble-content.tsx                      |  2 +-
 .../series-menu/arithmetic-series-menu.tsx         |  2 +-
 .../components/series-menu/format-picker.tsx       |  2 +-
 .../components/series-menu/measure-series-menu.tsx |  2 +-
 .../components/series-menu/percent-series-menu.tsx |  2 +-
 .../components/series-menu/quantile-picker.tsx     |  2 +-
 .../series-menu/quantile-series-menu.tsx           |  2 +-
 src/client/components/series-tile/add-series.tsx   |  2 +-
 .../components/series-tile/placeholder-series.tsx  |  2 +-
 src/client/components/series-tile/series-tile.tsx  |  2 +-
 src/client/components/series-tile/series-tiles.tsx |  2 +-
 .../components/split-menu/granularity-picker.tsx   |  2 +-
 .../components/split-menu/limit-dropdown.tsx       |  2 +-
 src/client/components/split-menu/sort-dropdown.tsx |  2 +-
 src/client/components/split-tile/add-split.tsx     |  2 +-
 src/client/components/split-tile/split-tile.tsx    |  4 ++--
 .../components/split-tile/split-tiles-row.tsx      |  2 +-
 src/client/components/split-tile/split-tiles.tsx   |  2 +-
 .../components/tabular-scroller/corner/corner.tsx  |  2 +-
 .../header/measures/measure-header-cell.tsx        |  2 +-
 .../header/measures/measures-header.tsx            |  2 +-
 .../header/splits/split-columns.tsx                |  2 +-
 .../measures/measure-background.tsx                |  2 +-
 .../tabular-scroller/measures/measure-cell.tsx     |  2 +-
 .../tabular-scroller/measures/measure-row.tsx      |  2 +-
 .../tabular-scroller/measures/measure-rows.tsx     |  2 +-
 .../tabular-scroller/measures/measure-value.tsx    |  2 +-
 .../tabular-scroller/sort-icon/sort-icon.tsx       |  2 +-
 .../splits/flattened-split-columns.tsx             |  2 +-
 .../tabular-scroller/splits/flattened-splits.tsx   |  2 +-
 .../tabular-scroller/splits/split-value.tsx        |  2 +-
 .../tabular-scroller/visible-rows/visible-rows.tsx |  2 +-
 .../tile-overflow-container.tsx                    |  4 ++--
 .../components/timezone-menu/timezone-menu.tsx     |  2 +-
 .../components/vertical-axis/vertical-axis.tsx     |  2 +-
 .../vis-measure-label/vis-measure-label.tsx        |  2 +-
 .../components/vis-selector/vis-selector-item.tsx  |  2 +-
 .../modals/druid-query-modal/druid-query-modal.tsx |  2 +-
 .../url-shortener-modal/url-shortener-modal.tsx    |  2 +-
 .../view-definition-modal.tsx                      |  2 +-
 src/client/oauth/oauth-message-view.tsx            |  2 +-
 src/client/utils/teleporter/teleporter.tsx         |  4 ++--
 .../views/cube-view/center-panel/center-panel.tsx  |  6 +++---
 src/client/views/cube-view/cube-view.tsx           |  2 +-
 src/client/views/error-view/general-error.tsx      |  2 +-
 .../bar-chart/improved-bar-chart/bar-chart.tsx     |  2 +-
 .../improved-bar-chart/bar-charts/bar-charts.tsx   |  2 +-
 .../improved-bar-chart/bar/single-bar.tsx          |  2 +-
 .../bar/single-time-shift-bar.tsx                  |  2 +-
 .../improved-bar-chart/bar/stacked-bar.tsx         |  2 +-
 .../bar/stacked-time-shift-bar.tsx                 |  2 +-
 .../improved-bar-chart/bars/background.tsx         |  2 +-
 .../bar-chart/improved-bar-chart/bars/bars.tsx     |  4 ++--
 .../improved-bar-chart/foreground/foreground.tsx   |  2 +-
 .../foreground/highlight-modal.tsx                 |  2 +-
 .../foreground/highlight-overlay.tsx               |  2 +-
 .../hover-tooltip/hover-tooltip.tsx                |  2 +-
 .../hover-tooltip/tooltip-content.tsx              |  2 +-
 .../bar-chart/improved-bar-chart/legend/Legend.tsx |  4 ++--
 .../bar-chart/improved-bar-chart/spacer/spacer.tsx |  2 +-
 .../bar-chart/improved-bar-chart/x-axis/x-axis.tsx |  2 +-
 .../improved-bar-chart/y-axis/single-y-axis.tsx    |  2 +-
 .../bar-chart/improved-bar-chart/y-axis/y-axis.tsx |  2 +-
 src/client/visualizations/grid/grid-split-menu.tsx |  2 +-
 src/client/visualizations/grid/grid-split-tile.tsx |  2 +-
 src/client/visualizations/grid/grid.tsx            |  2 +-
 src/client/visualizations/grid/scrolled-grid.tsx   |  2 +-
 src/client/visualizations/grid/split-labels.tsx    |  2 +-
 .../visualizations/grid/visualization-controls.tsx |  2 +-
 .../visualizations/heat-map/heatmap-corner.tsx     |  2 +-
 .../heat-map/heatmap-highlight-indicator.tsx       |  6 +++---
 .../heat-map/heatmap-highlight-modal.tsx           |  2 +-
 .../heat-map/heatmap-hover-indicator.tsx           |  2 +-
 .../heat-map/heatmap-hover-tooltip.tsx             |  2 +-
 .../base-chart/background/background.tsx           |  2 +-
 .../base-chart/foreground/foreground.tsx           |  2 +-
 .../base-chart/foreground/highlight-modal.tsx      |  2 +-
 .../base-chart/foreground/hover-guide.tsx          |  2 +-
 .../base-chart/foreground/hover-tooltip.tsx        |  2 +-
 .../base-chart/foreground/selection-overlay.tsx    |  2 +-
 .../line-chart/chart-line/chart-line.tsx           |  2 +-
 .../chart-line/colored-series-chart-line.tsx       |  2 +-
 .../line-chart/chart-line/series-chart-line.tsx    |  2 +-
 .../chart-line/singleton-series-chart-line.tsx     |  2 +-
 .../charts/charts-per-series/charts-per-series.tsx |  2 +-
 .../charts/charts-per-series/series-chart.tsx      |  2 +-
 .../charts-per-series/series-hover-content.tsx     |  2 +-
 .../charts/charts-per-split/charts-per-split.tsx   |  2 +-
 .../line-chart/charts/charts-per-split/label.tsx   |  2 +-
 .../charts/charts-per-split/split-chart.tsx        |  2 +-
 .../charts-per-split/split-hover-content.tsx       |  4 ++--
 .../visualizations/line-chart/charts/charts.tsx    |  2 +-
 .../visualizations/line-chart/legend/legend.tsx    |  4 ++--
 .../line-chart/legend/series-legend.tsx            |  2 +-
 .../line-chart/legend/split-legend.tsx             |  2 +-
 .../visualizations/line-chart/x-axis/x-axis.tsx    |  2 +-
 src/client/visualizations/scatterplot/heatmap.tsx  |  4 ++--
 src/client/visualizations/scatterplot/point.tsx    |  2 +-
 src/client/visualizations/scatterplot/tooltip.tsx  |  2 +-
 src/client/visualizations/scatterplot/x-axis.tsx   |  2 +-
 src/client/visualizations/scatterplot/y-axis.tsx   |  2 +-
 .../table/body/splits/nested-splits.tsx            |  2 +-
 .../table/body/splits/split-rows.tsx               |  2 +-
 .../table/header/splits/combined-splits-title.tsx  |  2 +-
 .../table/header/splits/splits-header.tsx          |  2 +-
 .../visualizations/table/highlight/highlight.tsx   |  2 +-
 .../table/scrolled-table/scrolled-table.tsx        |  2 +-
 src/client/visualizations/totals/total.tsx         |  4 ++--
 src/client/visualizations/totals/totals.tsx        |  2 +-
 .../visualization-settings.ts                      |  2 +-
 163 files changed, 188 insertions(+), 188 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 25ee4d29d..95bd4236e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -45,7 +45,7 @@ Create a new file [src/client/visualizations/](https://github.com/allegro/turnil
 Here you want to add the basis for your component with the visualization panel at the top:
 
 ```
-const <visualizationName>: React.SFC<ChartProps> = () => {
+const <visualizationName>: React.FunctionComponent<ChartProps> = () => {
     return <div>
         <h2>New visualization will be here!</h2>
     </div>;
diff --git a/package-lock.json b/package-lock.json
index 226c114f4..7e988af48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2843,9 +2843,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.14.23",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.23.tgz",
-      "integrity": "sha512-WngBZLuSkP4IAgPi0HOsGCHo6dn3CcuLQnCfC17VbA7YBgipZiZoTOhObwl/93DsFW0Y2a/ZXeonpW4DxirEJg==",
+      "version": "16.14.24",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.24.tgz",
+      "integrity": "sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -2863,12 +2863,12 @@
       }
     },
     "@types/react-dom": {
-      "version": "16.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.11.tgz",
-      "integrity": "sha512-x6zUx9/42B5Kl2Vl9HlopV8JF64wLpX3c+Pst9kc1HgzrsH+mkehe/zmHMQTplIrR48H2gpU7ZqurQolYu8XBA==",
+      "version": "16.9.14",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.14.tgz",
+      "integrity": "sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A==",
       "dev": true,
       "requires": {
-        "@types/react": "*"
+        "@types/react": "^16"
       }
     },
     "@types/react-syntax-highlighter": {
diff --git a/package.json b/package.json
index 4be8fd222..5df0cae3a 100644
--- a/package.json
+++ b/package.json
@@ -136,9 +136,9 @@
     "@types/node": "8.5.2",
     "@types/nopt": "3.0.29",
     "@types/randomstring": "1.1.6",
-    "@types/react": "16.14.23",
+    "@types/react": "16.14.24",
     "@types/react-copy-to-clipboard": "4.3.0",
-    "@types/react-dom": "16.0.11",
+    "@types/react-dom": "16.9.14",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/react-transition-group": "2.0.7",
     "@types/request-promise-native": "1.0.14",
diff --git a/src/client/components/auto-refresh-menu/auto-refresh-menu.tsx b/src/client/components/auto-refresh-menu/auto-refresh-menu.tsx
index af42d2eb6..464d9103d 100644
--- a/src/client/components/auto-refresh-menu/auto-refresh-menu.tsx
+++ b/src/client/components/auto-refresh-menu/auto-refresh-menu.tsx
@@ -84,7 +84,7 @@ function updatedText(dataCube: ClientDataCube, timekeeper: Timekeeper, timezone:
   }
 }
 
-export const AutoRefreshMenu: React.SFC<AutoRefreshMenuProps> = ({ autoRefreshRate, setAutoRefreshRate, openOn, onClose, dataCube, refreshMaxTime, timekeeper, timezone }) =>
+export const AutoRefreshMenu: React.FunctionComponent<AutoRefreshMenuProps> = ({ autoRefreshRate, setAutoRefreshRate, openOn, onClose, dataCube, refreshMaxTime, timekeeper, timezone }) =>
   <BubbleMenu
     className="auto-refresh-menu"
     direction="down"
diff --git a/src/client/components/bubble-title/bubble-title.tsx b/src/client/components/bubble-title/bubble-title.tsx
index 36fe0df97..63d601736 100644
--- a/src/client/components/bubble-title/bubble-title.tsx
+++ b/src/client/components/bubble-title/bubble-title.tsx
@@ -25,7 +25,7 @@ interface BubbleTitleProps {
   title: string;
 }
 
-export const BubbleTitle: React.SFC<BubbleTitleProps> = ({ title }) => {
+export const BubbleTitle: React.FunctionComponent<BubbleTitleProps> = ({ title }) => {
   const minWidth = clamp(title.length * PER_LETTER_PIXELS, MIN_TITLE_WIDTH, MAX_TITLE_WIDTH);
   return <div className="title" style={{ minWidth }}>{title}</div>;
 };
diff --git a/src/client/components/clearable-input/clearable-input.tsx b/src/client/components/clearable-input/clearable-input.tsx
index 3ffaddcd1..56527f8bd 100644
--- a/src/client/components/clearable-input/clearable-input.tsx
+++ b/src/client/components/clearable-input/clearable-input.tsx
@@ -36,7 +36,7 @@ export interface ClearableInputProps {
   onBlur?: React.FocusEventHandler<HTMLElement>;
 }
 
-export const ClearableInput: React.SFC<ClearableInputProps> = ({ className, placeholder, focusOnMount, onBlur, onChange, value = "", type = "text" }) => {
+export const ClearableInput: React.FunctionComponent<ClearableInputProps> = ({ className, placeholder, focusOnMount, onBlur, onChange, value = "", type = "text" }) => {
   const change = (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
 
   const clear = () => onChange("");
diff --git a/src/client/components/color-legend/color-legend.tsx b/src/client/components/color-legend/color-legend.tsx
index adcd36f4f..400f50082 100644
--- a/src/client/components/color-legend/color-legend.tsx
+++ b/src/client/components/color-legend/color-legend.tsx
@@ -37,7 +37,7 @@ const stripeWidth = 30;
 const stripeHeight = 200;
 const panelWidth = 100;
 
-export const ColorLegend: React.SFC<ColorLegendProps> = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => {
+export const ColorLegend: React.FunctionComponent<ColorLegendProps> = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => {
   const [min, max] = colorScale.domain();
   if (isNaN(min) || isNaN(max)) return null;
 
diff --git a/src/client/components/color-swabs/color-swabs.tsx b/src/client/components/color-swabs/color-swabs.tsx
index 05dcdddc1..6790a70a8 100644
--- a/src/client/components/color-swabs/color-swabs.tsx
+++ b/src/client/components/color-swabs/color-swabs.tsx
@@ -22,7 +22,7 @@ interface ColorSwabsProps {
   colorEntries: ColorEntry[];
 }
 
-export const ColorSwabs: React.SFC<ColorSwabsProps> = ({ colorEntries }) => {
+export const ColorSwabs: React.FunctionComponent<ColorSwabsProps> = ({ colorEntries }) => {
   const colorSwabs = colorEntries.map(({ color, name, value, previous, delta }: ColorEntry) => {
     const swabStyle = { background: color };
     return <tr key={name}>
diff --git a/src/client/components/debug-menu/debug-menu.tsx b/src/client/components/debug-menu/debug-menu.tsx
index ae973b103..1faf08458 100644
--- a/src/client/components/debug-menu/debug-menu.tsx
+++ b/src/client/components/debug-menu/debug-menu.tsx
@@ -30,7 +30,7 @@ export interface DebugMenuProps {
   dataCube: ClientDataCube;
 }
 
-export const DebugMenu: React.SFC<DebugMenuProps> = ({ dataCube, openOn, onClose, openDruidQueryModal, openRawDataModal, openViewDefinitionModal }) => {
+export const DebugMenu: React.FunctionComponent<DebugMenuProps> = ({ dataCube, openOn, onClose, openDruidQueryModal, openRawDataModal, openViewDefinitionModal }) => {
 
   const isNativeCluster = dataCube.clusterName === "native";
 
diff --git a/src/client/components/delta/delta.tsx b/src/client/components/delta/delta.tsx
index 00b4d592d..0f035eb6a 100644
--- a/src/client/components/delta/delta.tsx
+++ b/src/client/components/delta/delta.tsx
@@ -76,7 +76,7 @@ export interface DeltaProps {
   lowerIsBetter?: boolean;
 }
 
-export const Delta: React.SFC<DeltaProps> = ({ lowerIsBetter, currentValue, previousValue, formatter }) => {
+export const Delta: React.FunctionComponent<DeltaProps> = ({ lowerIsBetter, currentValue, previousValue, formatter }) => {
   const formattedDelta = formatDelta(currentValue, previousValue);
   if (formattedDelta === null) {
     return <span className="delta-neutral">-</span>;
diff --git a/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx b/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx
index 17e700a13..c97f70962 100644
--- a/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx
+++ b/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx
@@ -44,7 +44,7 @@ export interface DimensionActionsProps {
   addPartialFilter: (dimension: Dimension) => void;
 }
 
-export const DimensionActionsMenu: React.SFC<DimensionActionsProps & DimensionActionsMenuProps> =
+export const DimensionActionsMenu: React.FunctionComponent<DimensionActionsProps & DimensionActionsMenuProps> =
   (props: DimensionActionsMenuProps & DimensionActionsProps) => {
     const { addPartialFilter, clicker, essence, direction, containerStage, openOn, dimension, onClose } = props;
     return <BubbleMenu
@@ -65,7 +65,7 @@ export const DimensionActionsMenu: React.SFC<DimensionActionsProps & DimensionAc
     </BubbleMenu>;
   };
 
-export const DimensionActions: React.SFC<DimensionActionsProps> = (props: DimensionActionsProps) => {
+export const DimensionActions: React.FunctionComponent<DimensionActionsProps> = (props: DimensionActionsProps) => {
   const { onClose, addPartialFilter, clicker, essence: { splits, filter }, dimension } = props;
   if (!dimension) return null;
 
diff --git a/src/client/components/dimension-list-tile/dimension-item.tsx b/src/client/components/dimension-list-tile/dimension-item.tsx
index 5bc23f09e..548ef857d 100644
--- a/src/client/components/dimension-list-tile/dimension-item.tsx
+++ b/src/client/components/dimension-list-tile/dimension-item.tsx
@@ -39,7 +39,7 @@ export interface DimensionItemProps {
 export type DimensionClickHandler = (dimensionName: string, e: MouseEvent<HTMLElement>) => void;
 export type DimensionDragStartHandler = (dimensionName: string, e: DragEvent<HTMLElement>) => void;
 
-export const DimensionItem: React.SFC<DimensionItemProps> = ({ name, title, dimensionClick, dimensionDragStart, description, searchText, kind, selected }) => {
+export const DimensionItem: React.FunctionComponent<DimensionItemProps> = ({ name, title, dimensionClick, dimensionDragStart, description, searchText, kind, selected }) => {
   const infoBubbleClassName = "info-icon";
   const className = classNames(DIMENSION_CLASS_NAME, { selected });
 
diff --git a/src/client/components/drag-indicator/drag-indicator.tsx b/src/client/components/drag-indicator/drag-indicator.tsx
index 24a8aba82..2ba4ae458 100644
--- a/src/client/components/drag-indicator/drag-indicator.tsx
+++ b/src/client/components/drag-indicator/drag-indicator.tsx
@@ -27,7 +27,7 @@ interface DragIndicatorProps {
   dragPosition?: DragPosition;
 }
 
-export const DragIndicator: React.SFC<DragIndicatorProps> = props => {
+export const DragIndicator: React.FunctionComponent<DragIndicatorProps> = props => {
   const { dragPosition, dragOver, drop, dragLeave } = props;
   if (!dragPosition) return null;
   return <React.Fragment>
diff --git a/src/client/components/filter-menu/filter-menu.tsx b/src/client/components/filter-menu/filter-menu.tsx
index eaa748414..75d04451e 100644
--- a/src/client/components/filter-menu/filter-menu.tsx
+++ b/src/client/components/filter-menu/filter-menu.tsx
@@ -43,7 +43,7 @@ export interface FilterMenuProps {
   onClose: Fn;
 }
 
-export const FilterMenu: React.SFC<FilterMenuProps> = ({ dimension, ...props }: FilterMenuProps) => {
+export const FilterMenu: React.FunctionComponent<FilterMenuProps> = ({ dimension, ...props }: FilterMenuProps) => {
   if (!dimension) return null;
   switch (dimension.kind) {
     case "time":
diff --git a/src/client/components/filter-menu/time-filter-menu/time-filter-menu.tsx b/src/client/components/filter-menu/time-filter-menu/time-filter-menu.tsx
index 7b16500c0..ed2c5e2a5 100644
--- a/src/client/components/filter-menu/time-filter-menu/time-filter-menu.tsx
+++ b/src/client/components/filter-menu/time-filter-menu/time-filter-menu.tsx
@@ -43,7 +43,7 @@ function tabTitle(tab: TimeFilterTab) {
   return tab === TimeFilterTab.RELATIVE ? STRINGS.relative : STRINGS.fixed;
 }
 
-const TabSelector: React.SFC<TabSelectorProps> = props => {
+const TabSelector: React.FunctionComponent<TabSelectorProps> = props => {
   const { selectedTab, onTabSelect } = props;
   const tabs = [TimeFilterTab.RELATIVE, TimeFilterTab.FIXED].map(tab => {
     return {
diff --git a/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx b/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx
index 20d31c2d8..c54020345 100644
--- a/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx
+++ b/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx
@@ -65,7 +65,7 @@ function presets(dimension: TimeDimension): Array<Preset<string>> {
   ];
 }
 
-export const TimeShiftSelector: React.SFC<TimeShiftSelectorProps> = props => {
+export const TimeShiftSelector: React.FunctionComponent<TimeShiftSelectorProps> = props => {
   const { onShiftChange, dimension, shift: selectedTimeShift } = props;
   const timeShiftPreview = timeShiftPreviewForRange(props);
 
diff --git a/src/client/components/filter-tile/add-filter.tsx b/src/client/components/filter-tile/add-filter.tsx
index c7b00a15d..10fbfe0ab 100644
--- a/src/client/components/filter-tile/add-filter.tsx
+++ b/src/client/components/filter-tile/add-filter.tsx
@@ -28,7 +28,7 @@ interface AddFilterProps {
   essence: Essence;
 }
 
-export const AddFilter: React.SFC<AddFilterProps> = props => {
+export const AddFilter: React.FunctionComponent<AddFilterProps> = props => {
   const { appendFilter, menuStage, essence: { filter, dataCube } } = props;
   const tiles = allDimensions(dataCube.dimensions)
     .filter(dimension => !filter.getClauseForDimension(dimension))
diff --git a/src/client/components/filter-tile/filter-tile.tsx b/src/client/components/filter-tile/filter-tile.tsx
index e0103f355..c123c7dc6 100644
--- a/src/client/components/filter-tile/filter-tile.tsx
+++ b/src/client/components/filter-tile/filter-tile.tsx
@@ -80,7 +80,7 @@ interface FilterTileProps {
 
 export const FILTER_CLASS_NAME = "filter";
 
-export const FilterTile: React.SFC<FilterTileProps> = props => {
+export const FilterTile: React.FunctionComponent<FilterTileProps> = props => {
   const {
     clause,
     open,
diff --git a/src/client/components/filter-tile/filter-tiles.tsx b/src/client/components/filter-tile/filter-tiles.tsx
index 13b96ee07..44e779eeb 100644
--- a/src/client/components/filter-tile/filter-tiles.tsx
+++ b/src/client/components/filter-tile/filter-tiles.tsx
@@ -54,7 +54,7 @@ interface FilterTilesProps {
   openOverflowMenu: Fn;
 }
 
-export const FilterTiles: React.SFC<FilterTilesProps> = props => {
+export const FilterTiles: React.FunctionComponent<FilterTilesProps> = props => {
   const {
     menuStage,
     maxItems,
diff --git a/src/client/components/filter-tile/partial-filter-tile.tsx b/src/client/components/filter-tile/partial-filter-tile.tsx
index 597846182..68041d15f 100644
--- a/src/client/components/filter-tile/partial-filter-tile.tsx
+++ b/src/client/components/filter-tile/partial-filter-tile.tsx
@@ -41,7 +41,7 @@ interface PartialFilterTileProps {
   closeItem: Fn;
 }
 
-export const PartialFilterTile: React.SFC<PartialFilterTileProps> = props => {
+export const PartialFilterTile: React.FunctionComponent<PartialFilterTileProps> = props => {
   const { closeItem, saveClause, essence, timekeeper, locale, clicker, stage, dimension, style } = props;
   return <WithRef>
     {({ ref: openOn, setRef }) => <div
diff --git a/src/client/components/grid-border/grid-border.tsx b/src/client/components/grid-border/grid-border.tsx
index 77b087c35..bbeb39fbb 100644
--- a/src/client/components/grid-border/grid-border.tsx
+++ b/src/client/components/grid-border/grid-border.tsx
@@ -24,7 +24,7 @@ interface BottomBorderProps {
   tickLength: number;
 }
 
-export const BottomBorder: React.SFC<BottomBorderProps> = ({ stage, tickLength }) => {
+export const BottomBorder: React.FunctionComponent<BottomBorderProps> = ({ stage, tickLength }) => {
   return <line
     className="grid-border grid-bottom-border"
     transform={stage.getTransform()}
@@ -39,7 +39,7 @@ interface RightBorderProps {
  stage: Stage;
 }
 
-export const RightBorder: React.SFC<RightBorderProps> = ({ stage }) => {
+export const RightBorder: React.FunctionComponent<RightBorderProps> = ({ stage }) => {
   return <line
     className="grid-border grid-right-border"
     transform={stage.getTransform()}
diff --git a/src/client/components/grid-lines/grid-lines.tsx b/src/client/components/grid-lines/grid-lines.tsx
index 81e9d048f..185e03ee0 100644
--- a/src/client/components/grid-lines/grid-lines.tsx
+++ b/src/client/components/grid-lines/grid-lines.tsx
@@ -44,7 +44,7 @@ function lineCoordinates(orientation: "horizontal" | "vertical", value: number,
   }
 }
 
-export const GridLines: React.SFC<GridLinesProps> = props => {
+export const GridLines: React.FunctionComponent<GridLinesProps> = props => {
   const { orientation, stage, ticks, scale } = props;
 
   return <g className={classNames("grid-lines", orientation)} transform={stage.getTransform()}>
diff --git a/src/client/components/header-bar/header-bar.tsx b/src/client/components/header-bar/header-bar.tsx
index b1ac189ae..c8776248b 100644
--- a/src/client/components/header-bar/header-bar.tsx
+++ b/src/client/components/header-bar/header-bar.tsx
@@ -24,7 +24,7 @@ export interface HeaderBarProps {
   title?: string;
 }
 
-export const HeaderBar: React.SFC<HeaderBarProps> = props => {
+export const HeaderBar: React.FunctionComponent<HeaderBarProps> = props => {
   const { customization, title } = props;
 
   const headerStyle: React.CSSProperties = customization && customization.headerBackground && { background: customization.headerBackground };
diff --git a/src/client/components/highlight-modal/highlight-modal.tsx b/src/client/components/highlight-modal/highlight-modal.tsx
index f410d94fc..83842fc12 100644
--- a/src/client/components/highlight-modal/highlight-modal.tsx
+++ b/src/client/components/highlight-modal/highlight-modal.tsx
@@ -30,7 +30,7 @@ interface HighlightModalProps {
   acceptHighlight: Fn;
 }
 
-export const HighlightModal: React.SFC<HighlightModalProps> = ({ title, children, left, top, acceptHighlight, dropHighlight }) =>
+export const HighlightModal: React.FunctionComponent<HighlightModalProps> = ({ title, children, left, top, acceptHighlight, dropHighlight }) =>
   <ModalBubble className="highlight-modal" left={left} top={top} onClose={dropHighlight}>
     <BubbleTitle title={title} />
     <div className="value">{children}</div>
diff --git a/src/client/components/highlight-string/highlight-string.tsx b/src/client/components/highlight-string/highlight-string.tsx
index bc82db54b..6ae93f276 100644
--- a/src/client/components/highlight-string/highlight-string.tsx
+++ b/src/client/components/highlight-string/highlight-string.tsx
@@ -48,6 +48,6 @@ function highlightBy(text: string, highlight: string | RegExp): string | JSX.Ele
   return highlightByIndex(text, startIndex, startIndex + match[0].length);
 }
 
-export const HighlightString: React.SFC<HighlightStringProps> = ({ className, text, highlight }) => {
+export const HighlightString: React.FunctionComponent<HighlightStringProps> = ({ className, text, highlight }) => {
   return <span className={classNames("highlight-string", className)}>{highlightBy(text, highlight)}</span>;
 };
diff --git a/src/client/components/input-with-presets/string-input-with-presets.tsx b/src/client/components/input-with-presets/string-input-with-presets.tsx
index a258a6ba5..471bf84ce 100644
--- a/src/client/components/input-with-presets/string-input-with-presets.tsx
+++ b/src/client/components/input-with-presets/string-input-with-presets.tsx
@@ -20,5 +20,5 @@ import { InputWithPresets, InputWithPresetsProps } from "./input-with-presets";
 
 type StringInputWithPresetsProps = Omit<InputWithPresetsProps<string>, "parseCustomValue" | "formatCustomValue">;
 
-export const StringInputWithPresets: React.SFC<StringInputWithPresetsProps> = props =>
+export const StringInputWithPresets: React.FunctionComponent<StringInputWithPresetsProps> = props =>
   <InputWithPresets<string> {...props} parseCustomValue={identity} formatCustomValue={identity} />;
diff --git a/src/client/components/markdown-node/markdown-node.tsx b/src/client/components/markdown-node/markdown-node.tsx
index 4e6b9ac4f..9717aa499 100644
--- a/src/client/components/markdown-node/markdown-node.tsx
+++ b/src/client/components/markdown-node/markdown-node.tsx
@@ -26,7 +26,7 @@ function innerMarkdown(input: string): { __html: string } {
   return { __html: snarkdown(input) };
 }
 
-export const MarkdownNode: React.SFC<MarkdownBubbleProps> = ({ markdown }) => {
+export const MarkdownNode: React.FunctionComponent<MarkdownBubbleProps> = ({ markdown }) => {
   return <div
     className="markdown-content"
     dangerouslySetInnerHTML={innerMarkdown(markdown)} />;
diff --git a/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx b/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx
index cc3ed2029..36cc11b16 100644
--- a/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx
+++ b/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx
@@ -31,7 +31,7 @@ interface AddPercentSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddArithmeticOperationButton: React.SFC<AddPercentSeriesButtonProps> = props => {
+export const AddArithmeticOperationButton: React.FunctionComponent<AddPercentSeriesButtonProps> = props => {
   const { measure, addPartialSeries, onClose } = props;
 
   function onNewOperation() {
diff --git a/src/client/components/measure-actions-menu/add-measure-series.tsx b/src/client/components/measure-actions-menu/add-measure-series.tsx
index b3f497719..1bc677f99 100644
--- a/src/client/components/measure-actions-menu/add-measure-series.tsx
+++ b/src/client/components/measure-actions-menu/add-measure-series.tsx
@@ -32,7 +32,7 @@ interface AddMeasureSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddMeasureSeriesButton: React.SFC<AddMeasureSeriesButtonProps> = props => {
+export const AddMeasureSeriesButton: React.FunctionComponent<AddMeasureSeriesButtonProps> = props => {
   const { series, measure, onClose, addSeries } = props;
   const measureDisabled = series.hasMeasure(measure);
 
diff --git a/src/client/components/measure-actions-menu/add-percent-series.tsx b/src/client/components/measure-actions-menu/add-percent-series.tsx
index 3e26b3310..b9b7f48d8 100644
--- a/src/client/components/measure-actions-menu/add-percent-series.tsx
+++ b/src/client/components/measure-actions-menu/add-percent-series.tsx
@@ -39,7 +39,7 @@ interface AddPercentSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddPercentSeriesButton: React.SFC<AddPercentSeriesButtonProps> = props => {
+export const AddPercentSeriesButton: React.FunctionComponent<AddPercentSeriesButtonProps> = props => {
   const { series, measure, addSeries, onClose } = props;
 
   const percentSeries: Set<PercentOperation> = series
diff --git a/src/client/components/measure-actions-menu/add-quantile-series.tsx b/src/client/components/measure-actions-menu/add-quantile-series.tsx
index 62424b788..3ca3d2a07 100644
--- a/src/client/components/measure-actions-menu/add-quantile-series.tsx
+++ b/src/client/components/measure-actions-menu/add-quantile-series.tsx
@@ -33,7 +33,7 @@ interface AddQuantileSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddQuantileSeriesButton: React.SFC<AddQuantileSeriesButtonProps> = props => {
+export const AddQuantileSeriesButton: React.FunctionComponent<AddQuantileSeriesButtonProps> = props => {
   const { series, measure, addPartialSeries, addSeries, onClose } = props;
 
   function onNewQuantileSeries() {
diff --git a/src/client/components/measure-actions-menu/measure-actions-menu.tsx b/src/client/components/measure-actions-menu/measure-actions-menu.tsx
index 69b6374b8..6324f4fb1 100644
--- a/src/client/components/measure-actions-menu/measure-actions-menu.tsx
+++ b/src/client/components/measure-actions-menu/measure-actions-menu.tsx
@@ -47,7 +47,7 @@ export interface MeasureActionsProps {
   onClose: Fn;
 }
 
-export const MeasureActionsMenu: React.SFC<MeasureActionsMenuProps & MeasureActionsProps> = props => {
+export const MeasureActionsMenu: React.FunctionComponent<MeasureActionsMenuProps & MeasureActionsProps> = props => {
   const { direction, containerStage, openOn, measure, onClose } = props;
   if (!measure) return null;
 
diff --git a/src/client/components/measure-bubble-content/measure-bubble-content.tsx b/src/client/components/measure-bubble-content/measure-bubble-content.tsx
index 9bf562657..d015b3259 100644
--- a/src/client/components/measure-bubble-content/measure-bubble-content.tsx
+++ b/src/client/components/measure-bubble-content/measure-bubble-content.tsx
@@ -26,7 +26,7 @@ export interface MeasureBubbleContentProps {
   lowerIsBetter?: boolean;
 }
 
-export const MeasureBubbleContent: React.SFC<MeasureBubbleContentProps> = ({ lowerIsBetter, formatter, current, previous }) => {
+export const MeasureBubbleContent: React.FunctionComponent<MeasureBubbleContentProps> = ({ lowerIsBetter, formatter, current, previous }) => {
   const currentValue = formatter(current);
   const previousValue = formatter(previous);
   return <React.Fragment>
diff --git a/src/client/components/measures-tile/measure-item.tsx b/src/client/components/measures-tile/measure-item.tsx
index 90e01101a..66a05b91f 100644
--- a/src/client/components/measures-tile/measure-item.tsx
+++ b/src/client/components/measures-tile/measure-item.tsx
@@ -36,7 +36,7 @@ export interface MeasureItemProps {
   searchText: string;
 }
 
-export const MeasureItem: React.SFC<MeasureItemProps> = ({ title, name, measureDragStart, measureClick, description, searchText, approximate, selected }) => {
+export const MeasureItem: React.FunctionComponent<MeasureItemProps> = ({ title, name, measureDragStart, measureClick, description, searchText, approximate, selected }) => {
 
   const infoBubbleClassName = "measure-info-icon";
   const handleClick = (e: MouseEvent<HTMLElement>) => {
diff --git a/src/client/components/message-card/message-card.tsx b/src/client/components/message-card/message-card.tsx
index 10b5bdf70..36919924f 100644
--- a/src/client/components/message-card/message-card.tsx
+++ b/src/client/components/message-card/message-card.tsx
@@ -21,7 +21,7 @@ interface MessageCardProps {
   title: string;
 }
 
-export const MessageCard: React.SFC<MessageCardProps> = props => {
+export const MessageCard: React.FunctionComponent<MessageCardProps> = props => {
   const { title, children } = props;
   return <div className="message-card">
     <div className="message-card-title">{title}</div>
diff --git a/src/client/components/message-panel/message-panel.tsx b/src/client/components/message-panel/message-panel.tsx
index 0b870487e..b3085042b 100644
--- a/src/client/components/message-panel/message-panel.tsx
+++ b/src/client/components/message-panel/message-panel.tsx
@@ -24,7 +24,7 @@ interface ErrorViewActionProps {
   label: string;
 }
 
-export const MessagePanelAction: React.SFC<ErrorViewActionProps> = ({ action, label }) =>
+export const MessagePanelAction: React.FunctionComponent<ErrorViewActionProps> = ({ action, label }) =>
     <Button type="primary" onClick={action} title={label} />;
 
 interface ErrorViewProps {
@@ -32,7 +32,7 @@ interface ErrorViewProps {
   title: string;
 }
 
-export const MessagePanel: React.SFC<ErrorViewProps> = ({ message, title, children }) => {
+export const MessagePanel: React.FunctionComponent<ErrorViewProps> = ({ message, title, children }) => {
   return <div className="message-panel">
     <div className="message-panel__container">
       <div className="message-panel__title">{title}</div>
diff --git a/src/client/components/message/message.tsx b/src/client/components/message/message.tsx
index 3cde5112b..e354de205 100644
--- a/src/client/components/message/message.tsx
+++ b/src/client/components/message/message.tsx
@@ -26,7 +26,7 @@ interface ErrorProps {
   level?: MessageLevel;
 }
 
-export const Message: React.SFC<ErrorProps> = props => {
+export const Message: React.FunctionComponent<ErrorProps> = props => {
   const { content, title, level = "notice" } = props;
   return <div className={classNames("message", level)}>
     <div className="whiteout" />
diff --git a/src/client/components/nav-list/nav-list.tsx b/src/client/components/nav-list/nav-list.tsx
index 3940bdda1..ad060c754 100644
--- a/src/client/components/nav-list/nav-list.tsx
+++ b/src/client/components/nav-list/nav-list.tsx
@@ -75,7 +75,7 @@ function renderItem(item: NavItem, iconSvg: string, selectedName: string): JSX.E
   return isNavLink(item) ? renderLink(item, iconSvg, selected) : renderAction(item, iconSvg, selected);
 }
 
-export const NavList: React.SFC<NavListProps> = ({ title, navLinks, iconSvg, selected }) => {
+export const NavList: React.FunctionComponent<NavListProps> = ({ title, navLinks, iconSvg, selected }) => {
   return <div className={classNames("nav-list", { "no-title": !title })}>
     {title && <div className="group-title">{title}</div>}
     <div className="items">
diff --git a/src/client/components/nav-logo/nav-logo.tsx b/src/client/components/nav-logo/nav-logo.tsx
index 8fb820aaf..0e0ace985 100644
--- a/src/client/components/nav-logo/nav-logo.tsx
+++ b/src/client/components/nav-logo/nav-logo.tsx
@@ -23,7 +23,7 @@ export interface NavLogoProps {
   customLogoSvg: string;
 }
 
-export const NavLogo: React.SFC<NavLogoProps> = ({ customLogoSvg }) =>
+export const NavLogo: React.FunctionComponent<NavLogoProps> = ({ customLogoSvg }) =>
   <div className="nav-logo">
     <div className="logo">
       <SvgIcon svg={customLogoSvg} />
diff --git a/src/client/components/no-data/data-cube-not-found.tsx b/src/client/components/no-data/data-cube-not-found.tsx
index 2e73d2242..842f97a85 100644
--- a/src/client/components/no-data/data-cube-not-found.tsx
+++ b/src/client/components/no-data/data-cube-not-found.tsx
@@ -18,7 +18,7 @@ import React from "react";
 import { navigateToHome } from "../../applications/turnilo-application/view";
 import { MessagePanel, MessagePanelAction } from "../message-panel/message-panel";
 
-export const DataCubeNotFound: React.SFC<{}> = () => {
+export const DataCubeNotFound: React.FunctionComponent<{}> = () => {
   return <MessagePanel title="DataCube not found">
     <MessagePanelAction action={navigateToHome}
                         label="Go back to data cubes list"/>
diff --git a/src/client/components/pinboard-measure-tile/pinboard-measure-tile.tsx b/src/client/components/pinboard-measure-tile/pinboard-measure-tile.tsx
index e42aecc51..b4165e9e0 100644
--- a/src/client/components/pinboard-measure-tile/pinboard-measure-tile.tsx
+++ b/src/client/components/pinboard-measure-tile/pinboard-measure-tile.tsx
@@ -33,7 +33,7 @@ export interface PinboardMeasureTileProps {
 
 const renderSelectedItem = (item: SortOn) => item ? SortOn.getTitle(item) : "---";
 
-export const PinboardMeasureTile: React.SFC<PinboardMeasureTileProps> = props => {
+export const PinboardMeasureTile: React.FunctionComponent<PinboardMeasureTileProps> = props => {
   const { essence, title, dimension, sortOn, onSelect } = props;
 
   const sortOns = concatTruthy(
diff --git a/src/client/components/pinboard-panel/pinboard-tiles.tsx b/src/client/components/pinboard-panel/pinboard-tiles.tsx
index 26d8c3c64..886939257 100644
--- a/src/client/components/pinboard-panel/pinboard-tiles.tsx
+++ b/src/client/components/pinboard-panel/pinboard-tiles.tsx
@@ -45,7 +45,7 @@ function pinnedDimensions(essence: Essence): Dimension[] {
   return mapTruthy(pinnedDimensions.toArray(), dimensionName => findDimensionByName(dataCube.dimensions, dimensionName));
 }
 
-export const PinboardTiles: React.SFC<PinboardTilesProps> = props => {
+export const PinboardTiles: React.FunctionComponent<PinboardTilesProps> = props => {
   const { essence, timekeeper, clicker, hidePlaceholder, refreshRequestTimestamp } = props;
   const tileDimensions = pinnedDimensions(essence);
   const sortOn = pinnedSortOn(essence);
diff --git a/src/client/components/pinboard-tile/data-rows.tsx b/src/client/components/pinboard-tile/data-rows.tsx
index 026f0a768..9334eb849 100644
--- a/src/client/components/pinboard-tile/data-rows.tsx
+++ b/src/client/components/pinboard-tile/data-rows.tsx
@@ -33,7 +33,7 @@ interface DataRowsProps {
 type EditableRowsProps = { rowMode: ReadyToEditMode | InEditMode } & Omit<DataRowsProps, "mode">;
 
 // This component is for guiding typescript through nested tagged union. Probably it could be inlined on ts 3.7
-const EditableRows: React.SFC<EditableRowsProps> = props => {
+const EditableRows: React.FunctionComponent<EditableRowsProps> = props => {
   const { rowMode, ...commonProps } = props;
   switch (rowMode.state) {
     case EditState.READY:
@@ -48,7 +48,7 @@ const EditableRows: React.SFC<EditableRowsProps> = props => {
   }
 };
 
-export const DataRows: React.SFC<DataRowsProps> = ({ rowMode, ...commonProps }) => {
+export const DataRows: React.FunctionComponent<DataRowsProps> = ({ rowMode, ...commonProps }) => {
   switch (rowMode.mode) {
     case RowModeId.READONLY:
       return <TextRows {...commonProps} />;
diff --git a/src/client/components/pinboard-tile/pinboard-dataset.tsx b/src/client/components/pinboard-tile/pinboard-dataset.tsx
index e5b296a7f..773766aa9 100644
--- a/src/client/components/pinboard-tile/pinboard-dataset.tsx
+++ b/src/client/components/pinboard-tile/pinboard-dataset.tsx
@@ -33,7 +33,7 @@ function noResultsMessage(searchText?: string): string {
   return searchText ? `No results for "${searchText}"` : "No results";
 }
 
-export const PinboardDataset: React.SFC<PinboardDatasetProps> = props => {
+export const PinboardDataset: React.FunctionComponent<PinboardDatasetProps> = props => {
   const { data, searchText } = props;
   const noResults = data.length === 0;
   return <div className="rows">
diff --git a/src/client/components/pinboard-tile/selectable-row.tsx b/src/client/components/pinboard-tile/selectable-row.tsx
index f9ef94f33..b4e95b848 100644
--- a/src/client/components/pinboard-tile/selectable-row.tsx
+++ b/src/client/components/pinboard-tile/selectable-row.tsx
@@ -29,7 +29,7 @@ interface SelectableRowProps {
   searchText: string;
 }
 
-export const SelectableRow: React.SFC<SelectableRowProps> = props => {
+export const SelectableRow: React.FunctionComponent<SelectableRowProps> = props => {
   const { measure, value, selected, searchText, onSelect } = props;
   const strValue = String(value);
   return <div
diff --git a/src/client/components/pinboard-tile/selectable-rows.tsx b/src/client/components/pinboard-tile/selectable-rows.tsx
index 2eb555bca..ca8d0f1f3 100644
--- a/src/client/components/pinboard-tile/selectable-rows.tsx
+++ b/src/client/components/pinboard-tile/selectable-rows.tsx
@@ -30,7 +30,7 @@ interface SelectableRowsProps {
   onSelect: Unary<unknown, void>;
 }
 
-export const SelectableRows: React.SFC<SelectableRowsProps> = props => {
+export const SelectableRows: React.FunctionComponent<SelectableRowsProps> = props => {
   const { data, onSelect, dimension, formatter, clause, searchText } = props;
   return <React.Fragment>
     {data.map(datum => {
diff --git a/src/client/components/pinboard-tile/text-row.tsx b/src/client/components/pinboard-tile/text-row.tsx
index 14eb87d5f..e043a5ea0 100644
--- a/src/client/components/pinboard-tile/text-row.tsx
+++ b/src/client/components/pinboard-tile/text-row.tsx
@@ -27,7 +27,7 @@ interface TextRowProps {
   searchText: string;
 }
 
-export const TextRow: React.SFC<TextRowProps> = props => {
+export const TextRow: React.FunctionComponent<TextRowProps> = props => {
   const { measure, value, searchText, onClick } = props;
   const strValue = String(value);
   const clickable = !!onClick;
diff --git a/src/client/components/pinboard-tile/text-rows.tsx b/src/client/components/pinboard-tile/text-rows.tsx
index 4d9d9b7f7..16e837163 100644
--- a/src/client/components/pinboard-tile/text-rows.tsx
+++ b/src/client/components/pinboard-tile/text-rows.tsx
@@ -28,7 +28,7 @@ interface TextRowsProps {
   onClick?: Unary<unknown, void>;
 }
 
-export const TextRows: React.SFC<TextRowsProps> = props => {
+export const TextRows: React.FunctionComponent<TextRowsProps> = props => {
   const { data, dimension, onClick, formatter, searchText } = props;
   return <React.Fragment>
     {data.map(datum => {
diff --git a/src/client/components/preview-string-filter-menu/preview-list.tsx b/src/client/components/preview-string-filter-menu/preview-list.tsx
index 42496ba1f..5a3c968de 100644
--- a/src/client/components/preview-string-filter-menu/preview-list.tsx
+++ b/src/client/components/preview-string-filter-menu/preview-list.tsx
@@ -56,7 +56,7 @@ function filterValues<T>(list: T[], filterMode: PreviewFilterMode, searchText: s
   return list.filter(predicate(filterMode, searchText));
 }
 
-export const PreviewList: React.SFC<PreviewListProps> = props => {
+export const PreviewList: React.FunctionComponent<PreviewListProps> = props => {
   const { regexErrorMessage, searchText, dataset, filterMode, dimension, limit } = props;
 
   if (regexErrorMessage) return errorNotice(regexErrorMessage);
diff --git a/src/client/components/query-error/query-error.tsx b/src/client/components/query-error/query-error.tsx
index 9c1dd757e..b97f6db13 100644
--- a/src/client/components/query-error/query-error.tsx
+++ b/src/client/components/query-error/query-error.tsx
@@ -24,7 +24,7 @@ export interface QueryErrorProps {
   error: Error;
 }
 
-export const QueryError: React.SFC<QueryErrorProps> = ({ error }) => {
+export const QueryError: React.FunctionComponent<QueryErrorProps> = ({ error }) => {
   if (isOauthError(error)) {
     throw error;
   }
diff --git a/src/client/components/segment-bubble/segment-bubble.tsx b/src/client/components/segment-bubble/segment-bubble.tsx
index cf816b17e..9e652fdab 100644
--- a/src/client/components/segment-bubble/segment-bubble.tsx
+++ b/src/client/components/segment-bubble/segment-bubble.tsx
@@ -29,7 +29,7 @@ export interface SegmentBubbleProps extends SegmentBubbleContentProps {
   top: number;
 }
 
-export const SegmentBubble: React.SFC<SegmentBubbleProps> = (props: SegmentBubbleProps) => {
+export const SegmentBubble: React.FunctionComponent<SegmentBubbleProps> = (props: SegmentBubbleProps) => {
   const { left, top, title, content } = props;
   return <BodyPortal left={left} top={top + OFFSET_V}>
     <div className="segment-bubble">
@@ -44,7 +44,7 @@ export interface SegmentBubbleContentProps {
   content?: ReactNode;
 }
 
-export const SegmentBubbleContent: React.SFC<SegmentBubbleContentProps> = ({ title, content }: SegmentBubbleContentProps) => (
+export const SegmentBubbleContent: React.FunctionComponent<SegmentBubbleContentProps> = ({ title, content }: SegmentBubbleContentProps) => (
   <div className="segment-bubble-text">
     <BubbleTitle title={title} />
     {content ? <div className="content">{content}</div> : null}
diff --git a/src/client/components/selectable-string-filter-menu/string-value.tsx b/src/client/components/selectable-string-filter-menu/string-value.tsx
index 4ec4b99b9..5a24fd05f 100644
--- a/src/client/components/selectable-string-filter-menu/string-value.tsx
+++ b/src/client/components/selectable-string-filter-menu/string-value.tsx
@@ -31,7 +31,7 @@ interface StringValueProps {
 
 const hasModKey = (e: React.MouseEvent<unknown>) => e.altKey || e.ctrlKey || e.metaKey;
 
-export const StringValue: React.SFC<StringValueProps> = props => {
+export const StringValue: React.FunctionComponent<StringValueProps> = props => {
   const { value, selected, checkboxStyle, highlight, onRowSelect } = props;
   const label = String(value);
 
diff --git a/src/client/components/selectable-string-filter-menu/string-values-list.tsx b/src/client/components/selectable-string-filter-menu/string-values-list.tsx
index 7333cdb16..13974a6e5 100644
--- a/src/client/components/selectable-string-filter-menu/string-values-list.tsx
+++ b/src/client/components/selectable-string-filter-menu/string-values-list.tsx
@@ -46,7 +46,7 @@ interface RowsListProps {
   onRowSelect: Binary<unknown, boolean, void>;
 }
 
-export const StringValuesList: React.SFC<RowsListProps> = props => {
+export const StringValuesList: React.FunctionComponent<RowsListProps> = props => {
   const { onRowSelect, filterMode, dataset, dimension, searchText, promotedValues, selectedValues } = props;
   const rowValues: Array<unknown> = dataset.data.map(d => d[dimension.name]);
   const values = prependPromotedValues(rowValues, promotedValues);
diff --git a/src/client/components/series-bubble-content/series-bubble-content.tsx b/src/client/components/series-bubble-content/series-bubble-content.tsx
index 71a4e12b6..ed33b2f12 100644
--- a/src/client/components/series-bubble-content/series-bubble-content.tsx
+++ b/src/client/components/series-bubble-content/series-bubble-content.tsx
@@ -25,7 +25,7 @@ interface SeriesBubbleContentProps {
   showPrevious: boolean;
 }
 
-export const SeriesBubbleContent: React.SFC<SeriesBubbleContentProps> = props => {
+export const SeriesBubbleContent: React.FunctionComponent<SeriesBubbleContentProps> = props => {
   const { series, datum, showPrevious } = props;
   if (!showPrevious) {
     return <React.Fragment>
diff --git a/src/client/components/series-menu/arithmetic-series-menu.tsx b/src/client/components/series-menu/arithmetic-series-menu.tsx
index b0adaa827..1f32bb46a 100644
--- a/src/client/components/series-menu/arithmetic-series-menu.tsx
+++ b/src/client/components/series-menu/arithmetic-series-menu.tsx
@@ -64,7 +64,7 @@ function expressionSeriesTitle(series: ExpressionSeries, measure: ClientMeasure,
   return concreteSeries.title();
 }
 
-export const ArithmeticSeriesMenu: React.SFC<ArithmeticOperationSeriesMenuProps> = props => {
+export const ArithmeticSeriesMenu: React.FunctionComponent<ArithmeticOperationSeriesMenuProps> = props => {
   const { measure, measures, initialSeries, series, seriesList, onChange } = props;
 
   function isSeriesValid({ expression }: ExpressionSeries): boolean {
diff --git a/src/client/components/series-menu/format-picker.tsx b/src/client/components/series-menu/format-picker.tsx
index fca0b5851..16e46b3ae 100644
--- a/src/client/components/series-menu/format-picker.tsx
+++ b/src/client/components/series-menu/format-picker.tsx
@@ -66,7 +66,7 @@ function printFormat(format: SeriesFormat, measureFormat: string): string {
   }
 }
 
-export const FormatPicker: React.SFC<FormatPickerProps> = ({ format, measure, formatChange }) => {
+export const FormatPicker: React.FunctionComponent<FormatPickerProps> = ({ format, measure, formatChange }) => {
   const measureFormat = measure.format;
 
   const formatPresets = concatTruthy(
diff --git a/src/client/components/series-menu/measure-series-menu.tsx b/src/client/components/series-menu/measure-series-menu.tsx
index 2269e7d36..54a2c281a 100644
--- a/src/client/components/series-menu/measure-series-menu.tsx
+++ b/src/client/components/series-menu/measure-series-menu.tsx
@@ -27,7 +27,7 @@ interface MeasureSeriesMenuProps {
   onChange: Binary<MeasureSeries, boolean, void>;
 }
 
-export const MeasureSeriesMenu: React.SFC<MeasureSeriesMenuProps> = ({ measure, series, onChange }) => {
+export const MeasureSeriesMenu: React.FunctionComponent<MeasureSeriesMenuProps> = ({ measure, series, onChange }) => {
 
   function onFormatChange(format: SeriesFormat) {
     onChange(series.set("format", format), true);
diff --git a/src/client/components/series-menu/percent-series-menu.tsx b/src/client/components/series-menu/percent-series-menu.tsx
index 17b66bf24..0e1d9330c 100644
--- a/src/client/components/series-menu/percent-series-menu.tsx
+++ b/src/client/components/series-menu/percent-series-menu.tsx
@@ -50,7 +50,7 @@ function operationToExpression(operation: PercentOperation): PercentExpression {
 
 const renderOperation = (op: Operation): string => op.label;
 
-export const PercentSeriesMenu: React.SFC<PercentSeriesMenuProps> = ({ series, seriesList, measure, onChange }) => {
+export const PercentSeriesMenu: React.FunctionComponent<PercentSeriesMenuProps> = ({ series, seriesList, measure, onChange }) => {
 
   const selectedOperations = seriesList
     .getExpressionSeriesFor(measure.name)
diff --git a/src/client/components/series-menu/quantile-picker.tsx b/src/client/components/series-menu/quantile-picker.tsx
index 188ff9adf..dbb82e4e5 100644
--- a/src/client/components/series-menu/quantile-picker.tsx
+++ b/src/client/components/series-menu/quantile-picker.tsx
@@ -29,5 +29,5 @@ function format(n: number): string {
   return n.toString();
 }
 
-export const QuantilePicker: React.SFC<QuantilePickerProps> = props =>
+export const QuantilePicker: React.FunctionComponent<QuantilePickerProps> = props =>
   <InputWithPresets<number> {...props} parseCustomValue={parse} formatCustomValue={format} />;
diff --git a/src/client/components/series-menu/quantile-series-menu.tsx b/src/client/components/series-menu/quantile-series-menu.tsx
index db8bffded..b8f0574f8 100644
--- a/src/client/components/series-menu/quantile-series-menu.tsx
+++ b/src/client/components/series-menu/quantile-series-menu.tsx
@@ -42,7 +42,7 @@ const percentiles: Array<Preset<number>> = [
   { identity: 99, name: "99" }
 ];
 
-export const QuantileSeriesMenu: React.SFC<QuantileSeriesMenuProps> = ({ seriesList, initialSeries, measure, series, onChange }) => {
+export const QuantileSeriesMenu: React.FunctionComponent<QuantileSeriesMenuProps> = ({ seriesList, initialSeries, measure, series, onChange }) => {
 
   const otherSeries = seriesList.removeSeries(initialSeries);
 
diff --git a/src/client/components/series-tile/add-series.tsx b/src/client/components/series-tile/add-series.tsx
index 2b2e9af98..7b58a2f51 100644
--- a/src/client/components/series-tile/add-series.tsx
+++ b/src/client/components/series-tile/add-series.tsx
@@ -28,7 +28,7 @@ interface AddSeriesProps {
   essence: Essence;
 }
 
-export const AddSeries: React.SFC<AddSeriesProps> = props => {
+export const AddSeries: React.FunctionComponent<AddSeriesProps> = props => {
   const { appendMeasureSeries, menuStage, essence: { dataCube, series } } = props;
   const tiles = allMeasures(dataCube.measures)
     .filter(measure => !series.hasMeasure(measure))
diff --git a/src/client/components/series-tile/placeholder-series.tsx b/src/client/components/series-tile/placeholder-series.tsx
index ddf8f874f..b32ae16b2 100644
--- a/src/client/components/series-tile/placeholder-series.tsx
+++ b/src/client/components/series-tile/placeholder-series.tsx
@@ -38,7 +38,7 @@ interface PlaceholderSeriesTileProps {
   closeItem: Fn;
 }
 
-export const PlaceholderSeriesTile: React.SFC<PlaceholderSeriesTileProps> = props => {
+export const PlaceholderSeriesTile: React.FunctionComponent<PlaceholderSeriesTileProps> = props => {
   const { series, measures, seriesList, containerStage, saveSeries, closeItem, style, measure } = props;
   return <WithRef>
     {({ ref: openOn, setRef }) => <div
diff --git a/src/client/components/series-tile/series-tile.tsx b/src/client/components/series-tile/series-tile.tsx
index aaf5a0149..e87fe2323 100644
--- a/src/client/components/series-tile/series-tile.tsx
+++ b/src/client/components/series-tile/series-tile.tsx
@@ -42,7 +42,7 @@ interface SeriesTileProps {
   containerStage: Stage;
 }
 
-export const SeriesTile: React.SFC<SeriesTileProps> = props => {
+export const SeriesTile: React.FunctionComponent<SeriesTileProps> = props => {
   const { seriesList, measures, open, item, style, updateSeries, removeSeries, openSeriesMenu, closeSeriesMenu, dragStart, containerStage } = props;
   const { definition, measure } = item;
   const title = item.title();
diff --git a/src/client/components/series-tile/series-tiles.tsx b/src/client/components/series-tile/series-tiles.tsx
index 360d24fc6..b0c00d05f 100644
--- a/src/client/components/series-tile/series-tiles.tsx
+++ b/src/client/components/series-tile/series-tiles.tsx
@@ -50,7 +50,7 @@ interface SeriesTilesProps {
   openOverflowMenu: Fn;
 }
 
-export const SeriesTiles: React.SFC<SeriesTilesProps> = props => {
+export const SeriesTiles: React.FunctionComponent<SeriesTilesProps> = props => {
   const {
     openedSeriesMenu,
     menuStage,
diff --git a/src/client/components/split-menu/granularity-picker.tsx b/src/client/components/split-menu/granularity-picker.tsx
index c12f37468..c53d05078 100644
--- a/src/client/components/split-menu/granularity-picker.tsx
+++ b/src/client/components/split-menu/granularity-picker.tsx
@@ -28,7 +28,7 @@ export interface GranularityPickerProps {
   granularityChange: Unary<string, void>;
 }
 
-export const GranularityPicker: React.SFC<GranularityPickerProps> = ({ dimension, granularity, granularityChange }) => {
+export const GranularityPicker: React.FunctionComponent<GranularityPickerProps> = ({ dimension, granularity, granularityChange }) => {
   if (!isContinuous(dimension)) return null;
 
   const granularities = dimension.granularities || getGranularities(dimension.kind as ContinuousDimensionKind, dimension.bucketedBy);
diff --git a/src/client/components/split-menu/limit-dropdown.tsx b/src/client/components/split-menu/limit-dropdown.tsx
index 9a16cd12e..6d24af688 100644
--- a/src/client/components/split-menu/limit-dropdown.tsx
+++ b/src/client/components/split-menu/limit-dropdown.tsx
@@ -36,7 +36,7 @@ export interface LimitDropdownProps {
   onLimitSelect: Unary<number, void>;
 }
 
-export const LimitDropdown: React.SFC<LimitDropdownProps> = ({ onLimitSelect, limits, selectedLimit, includeNone }) => {
+export const LimitDropdown: React.FunctionComponent<LimitDropdownProps> = ({ onLimitSelect, limits, selectedLimit, includeNone }) => {
   return <Dropdown<number | string>
     label={STRINGS.limit}
     items={calculateLimits(limits, includeNone)}
diff --git a/src/client/components/split-menu/sort-dropdown.tsx b/src/client/components/split-menu/sort-dropdown.tsx
index c5025badf..db0bff547 100644
--- a/src/client/components/split-menu/sort-dropdown.tsx
+++ b/src/client/components/split-menu/sort-dropdown.tsx
@@ -30,7 +30,7 @@ export interface SortDropdownProps {
   onChange: Unary<Sort, void>;
 }
 
-export const SortDropdown: React.SFC<SortDropdownProps> = ({ direction, options, selected, onChange }) => {
+export const SortDropdown: React.FunctionComponent<SortDropdownProps> = ({ direction, options, selected, onChange }) => {
 
   function toggleDirection() {
     const newDirection = direction === SortDirection.descending ? SortDirection.ascending : SortDirection.descending;
diff --git a/src/client/components/split-tile/add-split.tsx b/src/client/components/split-tile/add-split.tsx
index e74b04f0d..bab8907ce 100644
--- a/src/client/components/split-tile/add-split.tsx
+++ b/src/client/components/split-tile/add-split.tsx
@@ -28,7 +28,7 @@ interface AddSplitProps {
   essence: Essence;
 }
 
-export const AddSplit: React.SFC<AddSplitProps> = props => {
+export const AddSplit: React.FunctionComponent<AddSplitProps> = props => {
   const { appendSplit, menuStage, essence: { dataCube, splits } } = props;
   const tiles = allDimensions(dataCube.dimensions)
     .filter(d => splits.findSplitForDimension(d) === undefined)
diff --git a/src/client/components/split-tile/split-tile.tsx b/src/client/components/split-tile/split-tile.tsx
index a8f87c938..879542cda 100644
--- a/src/client/components/split-tile/split-tile.tsx
+++ b/src/client/components/split-tile/split-tile.tsx
@@ -47,11 +47,11 @@ interface SplitTileProps extends SplitTileBaseProps {
 
 export const SPLIT_CLASS_NAME = "split";
 
-export const DefaultSplitTile: React.SFC<SplitTileBaseProps> = props => {
+export const DefaultSplitTile: React.FunctionComponent<SplitTileBaseProps> = props => {
   return <SplitTile {...props} splitMenuComponent={SplitMenu} />;
 };
 
-export const SplitTile: React.SFC<SplitTileProps> = props => {
+export const SplitTile: React.FunctionComponent<SplitTileProps> = props => {
   const { splitMenuComponent: SplitMenu, essence, open, split, dimension, style, removeSplit, updateSplit, openMenu, closeMenu, dragStart, containerStage } = props;
 
   const title = split.getTitle(dimension);
diff --git a/src/client/components/split-tile/split-tiles-row.tsx b/src/client/components/split-tile/split-tiles-row.tsx
index a9454aa69..f116afe31 100644
--- a/src/client/components/split-tile/split-tiles-row.tsx
+++ b/src/client/components/split-tile/split-tiles-row.tsx
@@ -48,7 +48,7 @@ interface SplitTilesRowState {
   overflowOpen?: boolean;
 }
 
-export const DefaultSplitTilesRow: React.SFC<SplitTilesRowBaseProps> = props =>
+export const DefaultSplitTilesRow: React.FunctionComponent<SplitTilesRowBaseProps> = props =>
   <SplitTilesRow {...props} splitTileComponent={DefaultSplitTile} />;
 
 export class SplitTilesRow extends React.Component<SplitTilesRowProps, SplitTilesRowState> {
diff --git a/src/client/components/split-tile/split-tiles.tsx b/src/client/components/split-tile/split-tiles.tsx
index a53d537cc..93532cf47 100644
--- a/src/client/components/split-tile/split-tiles.tsx
+++ b/src/client/components/split-tile/split-tiles.tsx
@@ -42,7 +42,7 @@ interface SplitTilesProps {
   splitTileComponent: React.ComponentType<SplitTileBaseProps>;
 }
 
-export const SplitTiles: React.SFC<SplitTilesProps> = props => {
+export const SplitTiles: React.FunctionComponent<SplitTilesProps> = props => {
   const {
     splitTileComponent: SplitTile,
     overflowOpen,
diff --git a/src/client/components/tabular-scroller/corner/corner.tsx b/src/client/components/tabular-scroller/corner/corner.tsx
index ba3735a07..3e497d04d 100644
--- a/src/client/components/tabular-scroller/corner/corner.tsx
+++ b/src/client/components/tabular-scroller/corner/corner.tsx
@@ -17,7 +17,7 @@
 import React from "react";
 import "./corner.scss";
 
-export const Corner: React.SFC<{}> = ({ children }) =>
+export const Corner: React.FunctionComponent<{}> = ({ children }) =>
   <div className="corner">
     {children}
   </div>;
diff --git a/src/client/components/tabular-scroller/header/measures/measure-header-cell.tsx b/src/client/components/tabular-scroller/header/measures/measure-header-cell.tsx
index 04444f74d..d14e2eaa4 100644
--- a/src/client/components/tabular-scroller/header/measures/measure-header-cell.tsx
+++ b/src/client/components/tabular-scroller/header/measures/measure-header-cell.tsx
@@ -26,7 +26,7 @@ interface MeasureHeaderCellProps {
   className?: string;
 }
 
-export const MeasureHeaderCell: React.SFC<MeasureHeaderCellProps> = ({ sort, width, title, className }) => {
+export const MeasureHeaderCell: React.FunctionComponent<MeasureHeaderCellProps> = ({ sort, width, title, className }) => {
   const sorted = sort !== null;
   return <div
     className={classNames("measure-header-cell", className, { sorted })}
diff --git a/src/client/components/tabular-scroller/header/measures/measures-header.tsx b/src/client/components/tabular-scroller/header/measures/measures-header.tsx
index e2e54747d..3809d5360 100644
--- a/src/client/components/tabular-scroller/header/measures/measures-header.tsx
+++ b/src/client/components/tabular-scroller/header/measures/measures-header.tsx
@@ -31,7 +31,7 @@ function sortDirection(commonSort: Sort, series: ConcreteSeries, period = Series
   return isSortedBy ? commonSort.direction : null;
 }
 
-export const MeasuresHeader: React.SFC<MeasuresHeaderProps> = props => {
+export const MeasuresHeader: React.FunctionComponent<MeasuresHeaderProps> = props => {
   const { cellWidth, series, sort, showPrevious } = props;
 
   return <React.Fragment>
diff --git a/src/client/components/tabular-scroller/header/splits/split-columns.tsx b/src/client/components/tabular-scroller/header/splits/split-columns.tsx
index 7180dd70e..e9fd69a6e 100644
--- a/src/client/components/tabular-scroller/header/splits/split-columns.tsx
+++ b/src/client/components/tabular-scroller/header/splits/split-columns.tsx
@@ -35,7 +35,7 @@ function sortDirection(split: Split, sort: Sort): SortDirection | null {
   return isCurrentSort ? sort.direction : null;
 }
 
-export const SplitColumnsHeader: React.SFC<SplitColumnsHeader> = ({ sort, splits, dataCube }) => {
+export const SplitColumnsHeader: React.FunctionComponent<SplitColumnsHeader> = ({ sort, splits, dataCube }) => {
   return <Corner>
     <div className="header-split-columns">
       {splits.splits.toArray().map(split => {
diff --git a/src/client/components/tabular-scroller/measures/measure-background.tsx b/src/client/components/tabular-scroller/measures/measure-background.tsx
index 33e1b77cd..79dcb7211 100644
--- a/src/client/components/tabular-scroller/measures/measure-background.tsx
+++ b/src/client/components/tabular-scroller/measures/measure-background.tsx
@@ -22,7 +22,7 @@ interface MeasureBackgroundProps {
   highlight: boolean;
 }
 
-export const MeasureBackground: React.SFC<MeasureBackgroundProps> = ({ highlight, width }) =>
+export const MeasureBackground: React.FunctionComponent<MeasureBackgroundProps> = ({ highlight, width }) =>
   <div className="measure-background-container">
     <div className={classNames("measure-background", { highlight })} style={{ width: width + "%" }} />
   </div>;
diff --git a/src/client/components/tabular-scroller/measures/measure-cell.tsx b/src/client/components/tabular-scroller/measures/measure-cell.tsx
index 28cd81565..d2116c548 100644
--- a/src/client/components/tabular-scroller/measures/measure-cell.tsx
+++ b/src/client/components/tabular-scroller/measures/measure-cell.tsx
@@ -22,7 +22,7 @@ interface MeasureCellProps {
   value: string | JSX.Element;
 }
 
-export const MeasureCell: React.SFC<MeasureCellProps> = props => {
+export const MeasureCell: React.FunctionComponent<MeasureCellProps> = props => {
   const { width, value, children } = props;
   return <div className="measure-cell" style={{ width }}>
     {children}
diff --git a/src/client/components/tabular-scroller/measures/measure-row.tsx b/src/client/components/tabular-scroller/measures/measure-row.tsx
index 88ae5975e..4f1f46c85 100644
--- a/src/client/components/tabular-scroller/measures/measure-row.tsx
+++ b/src/client/components/tabular-scroller/measures/measure-row.tsx
@@ -34,7 +34,7 @@ interface MeasureRowProps {
   showBar: boolean;
 }
 
-export const MeasureRow: React.SFC<MeasureRowProps> = props => {
+export const MeasureRow: React.FunctionComponent<MeasureRowProps> = props => {
   const { datum, showBar, scales, cellWidth, highlight, dimmed, style, essence } = props;
 
   const concreteSeries = essence.getConcreteSeries().toArray();
diff --git a/src/client/components/tabular-scroller/measures/measure-rows.tsx b/src/client/components/tabular-scroller/measures/measure-rows.tsx
index 9e062f3bd..f5f381ce0 100644
--- a/src/client/components/tabular-scroller/measures/measure-rows.tsx
+++ b/src/client/components/tabular-scroller/measures/measure-rows.tsx
@@ -35,7 +35,7 @@ interface MeasureRowsProps {
   showBarPredicate: Predicate<Datum>;
 }
 
-export const MeasureRows: React.SFC<MeasureRowsProps> = props => {
+export const MeasureRows: React.FunctionComponent<MeasureRowsProps> = props => {
   const { rowWidth, showBarPredicate, essence, cellWidth, hoverRow, scales, data, visibleRowsIndexRange, highlightedRowIndex } = props;
 
   return <VisibleRows
diff --git a/src/client/components/tabular-scroller/measures/measure-value.tsx b/src/client/components/tabular-scroller/measures/measure-value.tsx
index d191447d1..2ea7dcc19 100644
--- a/src/client/components/tabular-scroller/measures/measure-value.tsx
+++ b/src/client/components/tabular-scroller/measures/measure-value.tsx
@@ -31,7 +31,7 @@ interface MeasureValueProps {
   highlight: boolean;
 }
 
-export const MeasureValue: React.SFC<MeasureValueProps> = props => {
+export const MeasureValue: React.FunctionComponent<MeasureValueProps> = props => {
   const { series, datum, barScale, highlight, showPrevious, cellWidth } = props;
 
   const currentValue = series.selectValue(datum);
diff --git a/src/client/components/tabular-scroller/sort-icon/sort-icon.tsx b/src/client/components/tabular-scroller/sort-icon/sort-icon.tsx
index c12d17556..ae25b5d10 100644
--- a/src/client/components/tabular-scroller/sort-icon/sort-icon.tsx
+++ b/src/client/components/tabular-scroller/sort-icon/sort-icon.tsx
@@ -26,5 +26,5 @@ interface SortIconProps {
   direction: SortDirection;
 }
 
-export const SortIcon: React.SFC<SortIconProps> = ({ direction }) =>
+export const SortIcon: React.FunctionComponent<SortIconProps> = ({ direction }) =>
   <SvgIcon svg={sortArrow} className={classNames("sort-arrow", direction)} />;
diff --git a/src/client/components/tabular-scroller/splits/flattened-split-columns.tsx b/src/client/components/tabular-scroller/splits/flattened-split-columns.tsx
index 5f2b4fe46..baa8f8fbd 100644
--- a/src/client/components/tabular-scroller/splits/flattened-split-columns.tsx
+++ b/src/client/components/tabular-scroller/splits/flattened-split-columns.tsx
@@ -28,7 +28,7 @@ interface FlattenedSplitColumnsProps {
   timezone: Timezone;
 }
 
-export const FlattenedSplitColumns: React.SFC<FlattenedSplitColumnsProps> = ({ splits, datum, timezone }) =>
+export const FlattenedSplitColumns: React.FunctionComponent<FlattenedSplitColumnsProps> = ({ splits, datum, timezone }) =>
   <React.Fragment>
     {splits.map(split => {
       const { reference } = split;
diff --git a/src/client/components/tabular-scroller/splits/flattened-splits.tsx b/src/client/components/tabular-scroller/splits/flattened-splits.tsx
index 3be3db23d..471c25735 100644
--- a/src/client/components/tabular-scroller/splits/flattened-splits.tsx
+++ b/src/client/components/tabular-scroller/splits/flattened-splits.tsx
@@ -34,7 +34,7 @@ interface FlattenedSplitsProps {
   splitLabel: React.ComponentType<SplitLabelProps>;
 }
 
-export const FlattenedSplits: React.SFC<FlattenedSplitsProps> = props => {
+export const FlattenedSplits: React.FunctionComponent<FlattenedSplitsProps> = props => {
   const { splitLabel: SplitLabel, data, highlightedRowIndex, hoverRow, visibleRowsIndexRange, segmentWidth } = props;
 
   return <div className="flattened-splits-rows">
diff --git a/src/client/components/tabular-scroller/splits/split-value.tsx b/src/client/components/tabular-scroller/splits/split-value.tsx
index 7a9cce878..83a561e3a 100644
--- a/src/client/components/tabular-scroller/splits/split-value.tsx
+++ b/src/client/components/tabular-scroller/splits/split-value.tsx
@@ -25,7 +25,7 @@ interface SplitValueProps {
   style: React.CSSProperties;
 }
 
-export const SplitValue: React.SFC<SplitValueProps> = ({ className, highlight, dimmed, children, style }) =>
+export const SplitValue: React.FunctionComponent<SplitValueProps> = ({ className, highlight, dimmed, children, style }) =>
   <div
     className={classNames("split-value", className, { dimmed, highlight })}
     style={style}
diff --git a/src/client/components/tabular-scroller/visible-rows/visible-rows.tsx b/src/client/components/tabular-scroller/visible-rows/visible-rows.tsx
index ca049736d..980bbd8e1 100644
--- a/src/client/components/tabular-scroller/visible-rows/visible-rows.tsx
+++ b/src/client/components/tabular-scroller/visible-rows/visible-rows.tsx
@@ -35,7 +35,7 @@ interface VisibleRowsProps {
   renderRow: Unary<RowProps, JSX.Element>;
 }
 
-export const VisibleRows: React.SFC<VisibleRowsProps> = props => {
+export const VisibleRows: React.FunctionComponent<VisibleRowsProps> = props => {
   const { renderRow, hoveredRowDatum, rowsData, visibleRowsIndexRange, highlightedRowIndex } = props;
 
   const [start, end] = visibleRowsIndexRange;
diff --git a/src/client/components/tile-overflow-container/tile-overflow-container.tsx b/src/client/components/tile-overflow-container/tile-overflow-container.tsx
index c2e932f02..9c85ae210 100644
--- a/src/client/components/tile-overflow-container/tile-overflow-container.tsx
+++ b/src/client/components/tile-overflow-container/tile-overflow-container.tsx
@@ -30,7 +30,7 @@ interface TileOverflowContainerMenuProps {
 
 const SEGMENT_HEIGHT = 29 + CORE_ITEM_GAP;
 
-const TileOverflowContainerMenu: React.SFC<TileOverflowContainerMenuProps> = props => {
+const TileOverflowContainerMenu: React.FunctionComponent<TileOverflowContainerMenuProps> = props => {
   const { items, openOn, closeOverflowMenu } = props;
 
   const positionedItems = items.map((item, idx) =>
@@ -57,7 +57,7 @@ interface TileOverflowContainerProps {
   closeOverflowMenu: Fn;
 }
 
-export const TileOverflowContainer: React.SFC<TileOverflowContainerProps> = props => {
+export const TileOverflowContainer: React.FunctionComponent<TileOverflowContainerProps> = props => {
   const { x, items, open, openOverflowMenu, className, closeOverflowMenu } = props;
 
   const style = transformStyle(x, 0);
diff --git a/src/client/components/timezone-menu/timezone-menu.tsx b/src/client/components/timezone-menu/timezone-menu.tsx
index 314c206e9..83001ce89 100644
--- a/src/client/components/timezone-menu/timezone-menu.tsx
+++ b/src/client/components/timezone-menu/timezone-menu.tsx
@@ -31,7 +31,7 @@ export interface TimezoneMenuProps {
   timezones?: Timezone[];
 }
 
-export const TimezoneMenu: React.SFC<TimezoneMenuProps> = ({ timezone, timezones, onClose, changeTimezone, openOn }) => {
+export const TimezoneMenu: React.FunctionComponent<TimezoneMenuProps> = ({ timezone, timezones, onClose, changeTimezone, openOn }) => {
 
   function selectTimezone(newTimezone: Timezone) {
     changeTimezone(newTimezone);
diff --git a/src/client/components/vertical-axis/vertical-axis.tsx b/src/client/components/vertical-axis/vertical-axis.tsx
index 04b5ae428..82e9f87d0 100644
--- a/src/client/components/vertical-axis/vertical-axis.tsx
+++ b/src/client/components/vertical-axis/vertical-axis.tsx
@@ -33,7 +33,7 @@ export interface VerticalAxisProps {
   hideZero?: boolean;
 }
 
-export const VerticalAxis: React.SFC<VerticalAxisProps> = ({ formatter, stage, tickSize, ticks: inputTicks, scale, topLineExtend = 0, hideZero }) => {
+export const VerticalAxis: React.FunctionComponent<VerticalAxisProps> = ({ formatter, stage, tickSize, ticks: inputTicks, scale, topLineExtend = 0, hideZero }) => {
   const ticks = hideZero ? inputTicks.filter((tick: number) => tick !== 0) : inputTicks;
 
   const lines = ticks.map((tick: any) => {
diff --git a/src/client/components/vis-measure-label/vis-measure-label.tsx b/src/client/components/vis-measure-label/vis-measure-label.tsx
index f61815180..760f1496b 100644
--- a/src/client/components/vis-measure-label/vis-measure-label.tsx
+++ b/src/client/components/vis-measure-label/vis-measure-label.tsx
@@ -43,7 +43,7 @@ function renderPrevious(datum: Datum, series: ConcreteSeries): JSX.Element {
   </React.Fragment>;
 }
 
-export const VisMeasureLabel: React.SFC<VisMeasureLabelProps> = ({ series, datum, showPrevious }) => {
+export const VisMeasureLabel: React.FunctionComponent<VisMeasureLabelProps> = ({ series, datum, showPrevious }) => {
   return <div className="vis-measure-label">
     <span className="measure-title">{series.title()}</span>
     <span className="colon">: </span>
diff --git a/src/client/components/vis-selector/vis-selector-item.tsx b/src/client/components/vis-selector/vis-selector-item.tsx
index 1d1802115..a034247b1 100644
--- a/src/client/components/vis-selector/vis-selector-item.tsx
+++ b/src/client/components/vis-selector/vis-selector-item.tsx
@@ -27,7 +27,7 @@ interface VisSelectorItemProps {
   onClick?: Unary<VisualizationManifest, void>;
 }
 
-export const VisSelectorItem: React.SFC<VisSelectorItemProps> = ({ visualization, selected, onClick }) =>
+export const VisSelectorItem: React.FunctionComponent<VisSelectorItemProps> = ({ visualization, selected, onClick }) =>
   <div
     className={classNames("vis-item", (selected ? "selected" : "not-selected"))}
     key={visualization.name}
diff --git a/src/client/modals/druid-query-modal/druid-query-modal.tsx b/src/client/modals/druid-query-modal/druid-query-modal.tsx
index 72f6da982..0c1331611 100644
--- a/src/client/modals/druid-query-modal/druid-query-modal.tsx
+++ b/src/client/modals/druid-query-modal/druid-query-modal.tsx
@@ -29,7 +29,7 @@ interface DruidQueryModalProps {
   timekeeper: Timekeeper;
 }
 
-export const DruidQueryModal: React.SFC<DruidQueryModalProps> = ({ onClose, timekeeper, essence }) => {
+export const DruidQueryModal: React.FunctionComponent<DruidQueryModalProps> = ({ onClose, timekeeper, essence }) => {
   const { visualization, dataCube: { attributes, source, options: { customAggregations, customTransforms } } } = essence;
   const queryFn = visualization.name === "grid" ? gridQuery : standardQuery;
   const query = queryFn(essence, timekeeper);
diff --git a/src/client/modals/url-shortener-modal/url-shortener-modal.tsx b/src/client/modals/url-shortener-modal/url-shortener-modal.tsx
index 979028be7..0362aabfd 100644
--- a/src/client/modals/url-shortener-modal/url-shortener-modal.tsx
+++ b/src/client/modals/url-shortener-modal/url-shortener-modal.tsx
@@ -30,7 +30,7 @@ interface UrlProp {
   url: string;
 }
 
-export const UrlShortenerModal: React.SFC<UrlShortenerModalProps & UrlProp> = ({ title, onClose, url }) => {
+export const UrlShortenerModal: React.FunctionComponent<UrlShortenerModalProps & UrlProp> = ({ title, onClose, url }) => {
   return <Modal
     className="short-url-modal"
     title={title}
diff --git a/src/client/modals/view-definition-modal/view-definition-modal.tsx b/src/client/modals/view-definition-modal/view-definition-modal.tsx
index 5341a4622..49a253bdb 100644
--- a/src/client/modals/view-definition-modal/view-definition-modal.tsx
+++ b/src/client/modals/view-definition-modal/view-definition-modal.tsx
@@ -31,7 +31,7 @@ const header = <React.Fragment>
   View definition for <a className="mkurl-link" target="_blank" href="https://github.com/allegro/turnilo/blob/master/docs/generating-links.md">mkurl</a>
 </React.Fragment>;
 
-export const ViewDefinitionModal: React.SFC<ViewDefinitionModalProps> = ({ essence, onClose }) => {
+export const ViewDefinitionModal: React.FunctionComponent<ViewDefinitionModalProps> = ({ essence, onClose }) => {
 
   const viewDefinition = {
     dataCubeName: essence.dataCube.name,
diff --git a/src/client/oauth/oauth-message-view.tsx b/src/client/oauth/oauth-message-view.tsx
index ebe33f880..6c7592d72 100644
--- a/src/client/oauth/oauth-message-view.tsx
+++ b/src/client/oauth/oauth-message-view.tsx
@@ -23,7 +23,7 @@ interface OauthMessageViewProps {
   oauth: OauthEnabled;
 }
 
-export const OauthMessageView: React.SFC<OauthMessageViewProps> = ({ oauth }) => {
+export const OauthMessageView: React.FunctionComponent<OauthMessageViewProps> = ({ oauth }) => {
   return <MessagePanel
     title="You are not logged in">
     <MessagePanelAction action={() => login(oauth)} label={"Login"} />
diff --git a/src/client/utils/teleporter/teleporter.tsx b/src/client/utils/teleporter/teleporter.tsx
index 1b0e3e8e8..3af456071 100644
--- a/src/client/utils/teleporter/teleporter.tsx
+++ b/src/client/utils/teleporter/teleporter.tsx
@@ -29,7 +29,7 @@ interface SourceState {
 
 interface Teleporter {
   Source: typeof React.Component;
-  Target: React.SFC<{}>;
+  Target: React.FunctionComponent<{}>;
 }
 
 export function createTeleporter(): Teleporter {
@@ -42,7 +42,7 @@ export function createTeleporter(): Teleporter {
     }
   }
 
-  const Target: React.SFC<{}> = () => <div ref={saveTarget} />;
+  const Target: React.FunctionComponent<{}> = () => <div ref={saveTarget} />;
 
   class Source extends React.Component<{}, SourceState> {
 
diff --git a/src/client/views/cube-view/center-panel/center-panel.tsx b/src/client/views/cube-view/center-panel/center-panel.tsx
index 268e10e74..580726e8a 100644
--- a/src/client/views/cube-view/center-panel/center-panel.tsx
+++ b/src/client/views/cube-view/center-panel/center-panel.tsx
@@ -58,11 +58,11 @@ interface VisualizationControlsProps extends VisualizationControlsBaseProps {
   splitTilesRow: React.ComponentType<SplitTilesRowBaseProps>;
 }
 
-export const DefaultVisualizationControls: React.SFC<VisualizationControlsBaseProps> = props => {
+export const DefaultVisualizationControls: React.FunctionComponent<VisualizationControlsBaseProps> = props => {
   return <VisualizationControls {...props} splitTilesRow={DefaultSplitTilesRow} />;
 };
 
-export const VisualizationControls: React.SFC<VisualizationControlsProps> = props => {
+export const VisualizationControls: React.FunctionComponent<VisualizationControlsProps> = props => {
   const {
     splitTilesRow: SplitTilesRow,
     addSeries,
@@ -116,7 +116,7 @@ interface ChartPanelProps {
   drop: Unary<React.DragEvent<HTMLElement>, void>;
 }
 
-export const ChartPanel: React.SFC<ChartPanelProps> = props => {
+export const ChartPanel: React.FunctionComponent<ChartPanelProps> = props => {
   const {
     chartComponent,
     queryFactory,
diff --git a/src/client/views/cube-view/cube-view.tsx b/src/client/views/cube-view/cube-view.tsx
index 9e18b4f7a..7713525d7 100644
--- a/src/client/views/cube-view/cube-view.tsx
+++ b/src/client/views/cube-view/cube-view.tsx
@@ -61,7 +61,7 @@ import "./cube-view.scss";
 import { DownloadableDatasetProvider } from "./downloadable-dataset-context";
 import { PartialTilesProvider } from "./partial-tiles-provider";
 
-const ToggleArrow: React.SFC<{ right: boolean }> = ({ right }) =>
+const ToggleArrow: React.FunctionComponent<{ right: boolean }> = ({ right }) =>
   right
     ? <SvgIcon svg={require("../../icons/full-caret-small-right.svg")}/>
     : <SvgIcon svg={require("../../icons/full-caret-small-left.svg")}/>;
diff --git a/src/client/views/error-view/general-error.tsx b/src/client/views/error-view/general-error.tsx
index 9295f5ce3..b4163b715 100644
--- a/src/client/views/error-view/general-error.tsx
+++ b/src/client/views/error-view/general-error.tsx
@@ -26,7 +26,7 @@ interface GeneralErrorProps {
   errorId: string | null;
 }
 
-export const GeneralError: React.SFC<GeneralErrorProps> = ({ errorId }) => {
+export const GeneralError: React.FunctionComponent<GeneralErrorProps> = ({ errorId }) => {
   const message = errorId !== null ? recordedErrorMsg(errorId) : defaultErrorMsg;
   return <MessagePanel message={message} title="General error">
     <MessagePanelAction action={reload} label="Reload View" />
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx
index 66e27ca4a..1b8486eb3 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx
@@ -47,7 +47,7 @@ interface BarChartProps {
   acceptHighlight: Nullary<void>;
 }
 
-export const BarChart: React.SFC<BarChartProps> = props => {
+export const BarChart: React.FunctionComponent<BarChartProps> = props => {
   const { dataset, essence, stage, highlight, acceptHighlight, dropHighlight, saveHighlight } = props;
   const { [SPLIT]: split, ...totals } = selectMainDatum(dataset);
   const model = create(essence, dataset);
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx
index 646183f57..5f5d7f145 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx
@@ -37,7 +37,7 @@ interface BarChartsProps {
   xScale: XScale;
 }
 
-export const BarCharts: React.SFC<BarChartsProps> = props => {
+export const BarCharts: React.FunctionComponent<BarChartsProps> = props => {
   const { dropHighlight, acceptHighlight, interaction, model, datums, xScale, scrollLeft, stage, totals } = props;
   const seriesList = model.series.toArray();
   return <React.Fragment>
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
index 630ea8923..657d521da 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
@@ -31,7 +31,7 @@ interface SingleBarProps {
   model: BaseBarChartModel;
 }
 
-export const SingleBar: React.SFC<SingleBarProps> = props => {
+export const SingleBar: React.FunctionComponent<SingleBarProps> = props => {
   const { datum, xScale, yScale, model: { continuousSplit }, series } = props;
   const [maxHeight] = yScale.range();
   const x = continuousSplit.selectValue<DomainValue>(datum);
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
index c94a1d36a..eb08eb7a9 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
@@ -31,7 +31,7 @@ interface SingleTimeShiftBar {
   model: BaseBarChartModel;
 }
 
-export const SingleTimeShiftBar: React.SFC<SingleTimeShiftBar> = props => {
+export const SingleTimeShiftBar: React.FunctionComponent<SingleTimeShiftBar> = props => {
   const { datum, xScale, yScale, model: { continuousSplit }, series } = props;
   const [maxHeight] = yScale.range();
   const x = continuousSplit.selectValue<DomainValue>(datum);
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx
index 2b8a11bd9..01afd35d3 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx
@@ -33,7 +33,7 @@ interface StackedBarProps {
   series: ConcreteSeries;
 }
 
-export const StackedBar: React.SFC<StackedBarProps> = props => {
+export const StackedBar: React.FunctionComponent<StackedBarProps> = props => {
   const { datum, xScale, yScale, series, model: { colors, continuousSplit, nominalSplit } } = props;
   const datums = selectSplitDatums(datum);
 
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx
index 6d8c24332..9a4a631c0 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx
@@ -34,7 +34,7 @@ interface StackedTimeShiftBarProps {
   series: ConcreteSeries;
 }
 
-export const StackedTimeShiftBar: React.SFC<StackedTimeShiftBarProps> = props => {
+export const StackedTimeShiftBar: React.FunctionComponent<StackedTimeShiftBarProps> = props => {
   const { datum, xScale, yScale, series, model: { nominalSplit, continuousSplit, colors } } = props;
   const datums = selectSplitDatums(datum);
 
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx
index 49be9d82c..548600a1b 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx
@@ -26,7 +26,7 @@ interface BackgroundProps {
   yScale: LinearScale;
 }
 
-export const Background: React.SFC<BackgroundProps> = props => {
+export const Background: React.FunctionComponent<BackgroundProps> = props => {
   const { gridStage, yScale } = props;
   const ticks = pickTicks(yScale);
   return <React.Fragment>
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx
index de09d2997..29bea938b 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx
@@ -36,7 +36,7 @@ interface BarProps {
   series: ConcreteSeries;
 }
 
-const Bar: React.SFC<BarProps> = props => {
+const Bar: React.FunctionComponent<BarProps> = props => {
   const { model, ...rest } = props;
   const showPrevious = model.hasComparison;
   if (isStacked(model)) {
@@ -57,7 +57,7 @@ interface BarsProps {
   datums: Datum[];
 }
 
-export const Bars: React.SFC<BarsProps> = props => {
+export const Bars: React.FunctionComponent<BarsProps> = props => {
   const { model, stage, xScale, series, datums } = props;
   const extent = yExtent(datums, series, model.hasComparison);
   const yScale = getScale(extent, stage.height);
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx
index 2ec674d6b..2c9447e60 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx
@@ -38,7 +38,7 @@ interface ForegroundProps {
   stage: Stage;
 }
 
-export const Foreground: React.SFC<ForegroundProps> = props => {
+export const Foreground: React.FunctionComponent<ForegroundProps> = props => {
   const { stage, dropHighlight, acceptHighlight, container, model, series, xScale, yScale, interaction } = props;
   const rect = container.current.getBoundingClientRect();
   return <React.Fragment>
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx
index 6d2211bd8..75d94ca96 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx
@@ -35,7 +35,7 @@ interface HighlightModalProps {
   rect: ClientRect | DOMRect;
 }
 
-export const HighlightModal: React.SFC<HighlightModalProps> = props => {
+export const HighlightModal: React.FunctionComponent<HighlightModalProps> = props => {
   const {
     model: { timezone, continuousSplit },
     rect: { left, top },
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx
index 43080cc37..6ed6daf0b 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx
@@ -42,7 +42,7 @@ function getYValue(datum: Datum, series: ConcreteSeries, includePrevious: boolea
   return Math.max(series.selectValue(datum), series.selectValue(datum, SeriesDerivation.PREVIOUS));
 }
 
-export const HighlightOverlay: React.SFC<HighlightOverlayProps> = props => {
+export const HighlightOverlay: React.FunctionComponent<HighlightOverlayProps> = props => {
   const { stage, yScale, series, xScale, model: { hasComparison, continuousSplit }, interaction: { datum } } = props;
   const xValue = continuousSplit.selectValue<DomainValue>(datum);
   const left = xScale.calculate(xValue);
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx
index 239f871f8..00e1ba584 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx
@@ -33,7 +33,7 @@ interface HoverTooltipProps {
   rect: ClientRect | DOMRect;
 }
 
-export const HoverTooltip: React.SFC<HoverTooltipProps> = props => {
+export const HoverTooltip: React.FunctionComponent<HoverTooltipProps> = props => {
   const {
     model,
     rect: { left, top },
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx
index c4dd2c1dc..6fed4f67e 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx
@@ -44,7 +44,7 @@ function colorEntries(datum: Datum, series: ConcreteSeries, model: StackedBarCha
   });
 }
 
-export const Content: React.SFC<ContentProps> = props => {
+export const Content: React.FunctionComponent<ContentProps> = props => {
   const { model, series, datum } = props;
   if (isStacked(model)) {
     const entries = colorEntries(datum, series, model);
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx
index 25f4483fe..4e99f771e 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx
@@ -26,7 +26,7 @@ interface LegendValuesProps {
   colors: StackedBarChartModel["colors"];
 }
 
-const LegendValues: React.SFC<LegendValuesProps> = ({ colors }) => {
+const LegendValues: React.FunctionComponent<LegendValuesProps> = ({ colors }) => {
   return <div className="legend-values">
     <table className="legend-values-table">
       <tbody>
@@ -46,7 +46,7 @@ const LegendValues: React.SFC<LegendValuesProps> = ({ colors }) => {
   </div>;
 };
 
-export const Legend: React.SFC<LegendProps> = props => {
+export const Legend: React.FunctionComponent<LegendProps> = props => {
   const { model: { nominalSplit, nominalDimension, colors } } = props;
   const title = nominalSplit.getTitle(nominalDimension);
 
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx
index 5e90c02de..97a795739 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx
@@ -17,6 +17,6 @@
 import React from "react";
 import "./spacer.scss";
 
-export const Spacer: React.SFC<{}> = props => {
+export const Spacer: React.FunctionComponent<{}> = props => {
  return <div className="spacer" />;
 };
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx
index fe46f2907..4f93b8e73 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx
@@ -40,7 +40,7 @@ function calculateTicks(domain: XDomain, { continuousSplit }: BarChartModel): Do
   return domain;
 }
 
-export const XAxis: React.SFC<XAxisProps> = props => {
+export const XAxis: React.FunctionComponent<XAxisProps> = props => {
   const { model, stage, scale } = props;
   const ticks = calculateTicks(scale.domain(), model);
   return <svg width={stage.width} height={stage.height}>
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx
index 87ff7910f..855603add 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx
@@ -28,7 +28,7 @@ interface SingleYAxisProps {
   stage: Stage;
 }
 
-export const SingleYAxis: React.SFC<SingleYAxisProps> = props => {
+export const SingleYAxis: React.FunctionComponent<SingleYAxisProps> = props => {
   const { scale, series, stage } = props;
   return <div>
     <svg viewBox={stage.getViewBox()}>
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx
index de104570a..c8e0580b1 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx
@@ -29,7 +29,7 @@ interface YAxisProps {
   model: BarChartModel;
 }
 
-export const YAxis: React.SFC<YAxisProps> = props => {
+export const YAxis: React.FunctionComponent<YAxisProps> = props => {
   const { model, stage, datums } = props;
   const axisStage = calculateYAxisStage(stage);
   const seriesList = model.series.toArray();
diff --git a/src/client/visualizations/grid/grid-split-menu.tsx b/src/client/visualizations/grid/grid-split-menu.tsx
index fa3ac9fc0..2d2135eb0 100644
--- a/src/client/visualizations/grid/grid-split-menu.tsx
+++ b/src/client/visualizations/grid/grid-split-menu.tsx
@@ -29,7 +29,7 @@ import { SplitMenuProps } from "../../components/split-menu/split-menu";
 import { createSplit, SplitMenuBase, validateSplit } from "../../components/split-menu/split-menu-base";
 import { mainSplit } from "./utils/main-split";
 
-export const GridSplitMenu: React.SFC<SplitMenuProps> = props => {
+export const GridSplitMenu: React.FunctionComponent<SplitMenuProps> = props => {
   const { essence, split, dimension } = props;
   const controlSplit = split.equals(mainSplit(essence));
   if (controlSplit) {
diff --git a/src/client/visualizations/grid/grid-split-tile.tsx b/src/client/visualizations/grid/grid-split-tile.tsx
index ba1230597..6b83f46e4 100644
--- a/src/client/visualizations/grid/grid-split-tile.tsx
+++ b/src/client/visualizations/grid/grid-split-tile.tsx
@@ -23,7 +23,7 @@ import { classNames } from "../../utils/dom/dom";
 import { GridSplitMenu } from "./grid-split-menu";
 import { mainSplit } from "./utils/main-split";
 
-export const GridSplitTile: React.SFC<SplitTileBaseProps> = props => {
+export const GridSplitTile: React.FunctionComponent<SplitTileBaseProps> = props => {
   const { essence, open: isOpened, split, dimension, style, removeSplit, updateSplit, openMenu, closeMenu, dragStart, containerStage } = props;
 
   const enabled = split.equals(mainSplit(essence)) || isContinuous(dimension);
diff --git a/src/client/visualizations/grid/grid.tsx b/src/client/visualizations/grid/grid.tsx
index 170e7d748..ecfa2342e 100644
--- a/src/client/visualizations/grid/grid.tsx
+++ b/src/client/visualizations/grid/grid.tsx
@@ -31,7 +31,7 @@ interface GridProps extends ChartProps {
   segmentWidth: number;
 }
 
-const Grid: React.SFC<GridProps> = props => {
+const Grid: React.FunctionComponent<GridProps> = props => {
   const { essence, segmentWidth, setSegmentWidth, stage, clicker, data } = props;
   const availableWidth = stage.width - MIN_DIMENSION_WIDTH;
 
diff --git a/src/client/visualizations/grid/scrolled-grid.tsx b/src/client/visualizations/grid/scrolled-grid.tsx
index 59173083a..4ba5021fe 100644
--- a/src/client/visualizations/grid/scrolled-grid.tsx
+++ b/src/client/visualizations/grid/scrolled-grid.tsx
@@ -47,7 +47,7 @@ interface ScrolledGridProps {
   scrollTop: number;
 }
 
-export const ScrolledGrid: React.SFC<ScrolledGridProps> = props => {
+export const ScrolledGrid: React.FunctionComponent<ScrolledGridProps> = props => {
   const {
     essence,
     data,
diff --git a/src/client/visualizations/grid/split-labels.tsx b/src/client/visualizations/grid/split-labels.tsx
index 194ad7ba0..f8f9b65ab 100644
--- a/src/client/visualizations/grid/split-labels.tsx
+++ b/src/client/visualizations/grid/split-labels.tsx
@@ -28,7 +28,7 @@ interface SplitLabelsProps {
   datum: Datum;
 }
 
-export const SplitLabels: React.SFC<SplitLabelsProps> = props => {
+export const SplitLabels: React.FunctionComponent<SplitLabelsProps> = props => {
   const { splits, datum, timezone } = props;
   if (isTotalDatum(datum)) {
     return <div key="totals" className="flattened-split-value">Total</div>;
diff --git a/src/client/visualizations/grid/visualization-controls.tsx b/src/client/visualizations/grid/visualization-controls.tsx
index 6e1822344..5d630fe50 100644
--- a/src/client/visualizations/grid/visualization-controls.tsx
+++ b/src/client/visualizations/grid/visualization-controls.tsx
@@ -22,6 +22,6 @@ function GridSplitTilesRow(props: SplitTilesRowBaseProps) {
   return <SplitTilesRow {...props} splitTileComponent={GridSplitTile} />;
 }
 
-export const GridVisualizationControls: React.SFC<VisualizationControlsBaseProps> = props => {
+export const GridVisualizationControls: React.FunctionComponent<VisualizationControlsBaseProps> = props => {
   return <VisualizationControls{...props} splitTilesRow={GridSplitTilesRow} />;
 };
diff --git a/src/client/visualizations/heat-map/heatmap-corner.tsx b/src/client/visualizations/heat-map/heatmap-corner.tsx
index 03506b35a..d7b4ff5f4 100644
--- a/src/client/visualizations/heat-map/heatmap-corner.tsx
+++ b/src/client/visualizations/heat-map/heatmap-corner.tsx
@@ -29,7 +29,7 @@ const labelMargin = 20;
 // Around half of font-size with handpicked offset to accommodate rounding errors and rotation artifacts
 const rotationAxisOffset = 7;
 
-export const HeatmapCorner: React.SFC<HeatmapCornerProps> = ({ width, height, essence }) => {
+export const HeatmapCorner: React.FunctionComponent<HeatmapCornerProps> = ({ width, height, essence }) => {
   const { dataCube, splits: { splits } } = essence;
 
   const row = splits.get(0);
diff --git a/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx b/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx
index c69ded0d0..52bfd4878 100644
--- a/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx
+++ b/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx
@@ -24,7 +24,7 @@ interface RowHighlightProps {
   tileSize: number;
 }
 
-const RowHighlight: React.SFC<RowHighlightProps> = props => {
+const RowHighlight: React.FunctionComponent<RowHighlightProps> = props => {
   const { row, width, tileSize } = props;
   const top = row * tileSize;
   return <div className="heatmap-highlighter heatmap-highlighter-row" style={{
@@ -40,7 +40,7 @@ interface ColumnHighlightProps {
   tileGap: number;
 }
 
-const ColumnHighlight: React.SFC<ColumnHighlightProps> = props => {
+const ColumnHighlight: React.FunctionComponent<ColumnHighlightProps> = props => {
   const { column, tileSize, height, tileGap } = props;
   const left = column * tileSize + tileGap;
   return <div className="heatmap-highlighter heatmap-highlighter-column" style={{
@@ -57,7 +57,7 @@ interface HeatmapHighlightIndicatorProps {
   height: number;
 }
 
-export const HeatmapHighlightIndicator: React.SFC<HeatmapHighlightIndicatorProps> = props => {
+export const HeatmapHighlightIndicator: React.FunctionComponent<HeatmapHighlightIndicatorProps> = props => {
   const { position: { row, column }, width, height, tileGap, tileSize } = props;
 
   return <React.Fragment>
diff --git a/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx b/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx
index 2e6c60da4..5779d75ce 100644
--- a/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx
+++ b/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx
@@ -32,7 +32,7 @@ export interface HeatmapHighlightModalProps {
   acceptHighlight: Fn;
 }
 
-export const HeatmapHighlightModal: React.SFC<HeatmapHighlightModalProps> = props => {
+export const HeatmapHighlightModal: React.FunctionComponent<HeatmapHighlightModalProps> = props => {
   const { title, children, acceptHighlight, dropHighlight } = props;
   return <HighlightModal
     title={title}
diff --git a/src/client/visualizations/heat-map/heatmap-hover-indicator.tsx b/src/client/visualizations/heat-map/heatmap-hover-indicator.tsx
index c986bc82f..9f3c8bb52 100644
--- a/src/client/visualizations/heat-map/heatmap-hover-indicator.tsx
+++ b/src/client/visualizations/heat-map/heatmap-hover-indicator.tsx
@@ -24,7 +24,7 @@ interface HeatmapHoverIndicator {
   hoverPosition: HoverPosition;
 }
 
-export const HeatmapHoverIndicator: React.SFC<HeatmapHoverIndicator> = ({ tileGap, tileSize, hoverPosition }) => {
+export const HeatmapHoverIndicator: React.FunctionComponent<HeatmapHoverIndicator> = ({ tileGap, tileSize, hoverPosition }) => {
   const { column, row } = hoverPosition;
   const top = row * tileSize;
   const left = column * tileSize + tileGap;
diff --git a/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx b/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx
index 9843d3f14..89b34edbe 100644
--- a/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx
+++ b/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx
@@ -31,7 +31,7 @@ interface HeatmapHoverTooltip {
   scroll: { left: number, top: number };
 }
 
-export const HeatmapHoverTooltip: React.SFC<HeatmapHoverTooltip> = props => {
+export const HeatmapHoverTooltip: React.FunctionComponent<HeatmapHoverTooltip> = props => {
   const { dataset, essence, scroll, position: { column, row, top, left } } = props;
   const [, datum] = datumByPosition(dataset, { row, column });
   if (!datum) return null;
diff --git a/src/client/visualizations/line-chart/base-chart/background/background.tsx b/src/client/visualizations/line-chart/base-chart/background/background.tsx
index 9c9ebb582..89a7660fa 100644
--- a/src/client/visualizations/line-chart/base-chart/background/background.tsx
+++ b/src/client/visualizations/line-chart/base-chart/background/background.tsx
@@ -35,7 +35,7 @@ interface BackgroundProps {
   formatter: Unary<number, string>;
 }
 
-export const Background: React.SFC<BackgroundProps> = props => {
+export const Background: React.FunctionComponent<BackgroundProps> = props => {
   const { formatter, gridStage, axisStage, xScale, yScale, xTicks } = props;
 
   return <React.Fragment>
diff --git a/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx b/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx
index 307bbc3e3..3ffa0e070 100644
--- a/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx
+++ b/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx
@@ -37,7 +37,7 @@ interface ForegroundProps {
   timezone: Timezone;
 }
 
-export const Foreground: React.SFC<ForegroundProps> = props => {
+export const Foreground: React.FunctionComponent<ForegroundProps> = props => {
   const { stage, interaction, container, xScale, timezone, visualisationStage, hoverContent, dropHighlight, acceptHighlight } = props;
 
   return <React.Fragment>
diff --git a/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx b/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx
index 876d17c15..d29e3b549 100644
--- a/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx
+++ b/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx
@@ -32,7 +32,7 @@ interface HighlightModalProps {
   rect: ClientRect | DOMRect;
 }
 
-export const HighlightModal: React.SFC<HighlightModalProps> = props => {
+export const HighlightModal: React.FunctionComponent<HighlightModalProps> = props => {
   const { rect: { left, top }, interaction, timezone, dropHighlight, acceptHighlight, xScale } = props;
   const range = toPlywoodRange(interaction.clause);
   const x = xScale(range.midpoint());
diff --git a/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx b/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx
index bc033752d..f829bb54a 100644
--- a/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx
+++ b/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx
@@ -27,7 +27,7 @@ interface HoverGuideProps {
   xScale: ContinuousScale;
 }
 
-export const HoverGuide: React.SFC<HoverGuideProps> = props => {
+export const HoverGuide: React.FunctionComponent<HoverGuideProps> = props => {
   const { stage, hover: { range }, yScale, xScale } = props;
   const midpoint = range.midpoint();
   const x = xScale(midpoint);
diff --git a/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx b/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx
index 8ce8231ec..c377a93b6 100644
--- a/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx
+++ b/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx
@@ -32,7 +32,7 @@ interface HoverTooltipProps {
   stage: Stage;
 }
 
-export const HoverTooltip: React.SFC<HoverTooltipProps> = props => {
+export const HoverTooltip: React.FunctionComponent<HoverTooltipProps> = props => {
   const { content, interaction, xScale, timezone, stage } = props;
   const { range } = interaction;
   const x = xScale(range.midpoint());
diff --git a/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx b/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx
index 21153eb56..5ae44ab30 100644
--- a/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx
+++ b/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx
@@ -45,7 +45,7 @@ function getHighlightRange(interaction: Interaction, timezone: Timezone): Contin
   return null;
 }
 
-export const SelectionOverlay: React.SFC<SelectionOverlayProps> = props => {
+export const SelectionOverlay: React.FunctionComponent<SelectionOverlayProps> = props => {
   const { stage, timezone, interaction, xScale } = props;
   const range = getHighlightRange(interaction, timezone);
   if (!range) return null;
diff --git a/src/client/visualizations/line-chart/chart-line/chart-line.tsx b/src/client/visualizations/line-chart/chart-line/chart-line.tsx
index b73d2e4f5..8b7defec1 100644
--- a/src/client/visualizations/line-chart/chart-line/chart-line.tsx
+++ b/src/client/visualizations/line-chart/chart-line/chart-line.tsx
@@ -42,7 +42,7 @@ const stroke = (color: string, dashed: boolean): Pick<React.CSSProperties, "stro
   strokeDasharray: dashed ? "4 2" : undefined
 });
 
-export const ChartLine: React.SFC<ChartLineProps> = props => {
+export const ChartLine: React.FunctionComponent<ChartLineProps> = props => {
   const { color, dashed, getX, getY, dataset, showArea, stage, xScale, yScale } = props;
 
   const area = d3.area().y0(yScale(0));
diff --git a/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx b/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx
index a158350ff..ad92a0722 100644
--- a/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx
+++ b/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx
@@ -20,6 +20,6 @@ import { SeriesChartLine, SeriesChartLineProps } from "./series-chart-line";
 
 type ColoredSeriesChartLine = Omit<SeriesChartLineProps, "color"  | "showArea"> & { color: string };
 
-export const ColoredSeriesChartLine: React.SFC<ColoredSeriesChartLine> = props => {
+export const ColoredSeriesChartLine: React.FunctionComponent<ColoredSeriesChartLine> = props => {
   return <SeriesChartLine {...props} showArea={false}/>;
 };
diff --git a/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx b/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx
index 9569ed322..150215a49 100644
--- a/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx
+++ b/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx
@@ -29,7 +29,7 @@ interface OwnProps {
 
 export type SeriesChartLineProps = Pick<ChartLineProps, "showArea" | "getX" | "xScale" | "yScale" | "dataset" | "color" | "stage"> & OwnProps;
 
-export const SeriesChartLine: React.SFC<SeriesChartLineProps> = props => {
+export const SeriesChartLine: React.FunctionComponent<SeriesChartLineProps> = props => {
   const { showArea, essence, series, getX, stage, dataset, xScale, yScale, color } = props;
 
   const getY: Unary<Datum, number> = (d: Datum) => readNumber(series.selectValue(d));
diff --git a/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx b/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx
index ed4a045a5..8a9ed200c 100644
--- a/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx
+++ b/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx
@@ -20,6 +20,6 @@ import { SeriesChartLine, SeriesChartLineProps } from "./series-chart-line";
 
 type SingletonSeriesChartLineProps = Omit<SeriesChartLineProps, "color" | "showArea">;
 
-export const SingletonSeriesChartLine: React.SFC<SingletonSeriesChartLineProps> = props => {
+export const SingletonSeriesChartLine: React.FunctionComponent<SingletonSeriesChartLineProps> = props => {
   return <SeriesChartLine {...props} showArea={true} />;
 };
diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx
index d79276cb6..db44c1fde 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx
@@ -36,7 +36,7 @@ interface ChartsPerSeriesProps {
   stage: Stage;
 }
 
-export const ChartsPerSeries: React.SFC<ChartsPerSeriesProps> = props => {
+export const ChartsPerSeries: React.FunctionComponent<ChartsPerSeriesProps> = props => {
   const { interactions, xScale, xTicks, essence, dataset, stage } = props;
 
   const concreteSeries = essence.getConcreteSeries().toArray();
diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
index cbcb1689a..3de5912b3 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
@@ -45,7 +45,7 @@ interface SeriesChartProps {
   visualisationStage: Stage;
 }
 
-export const SeriesChart: React.SFC<SeriesChartProps> = props => {
+export const SeriesChart: React.FunctionComponent<SeriesChartProps> = props => {
   const { chartId, interactions, visualisationStage, chartStage, essence, series, xScale, xTicks, dataset } = props;
   const hasComparison = essence.hasComparison();
   const continuousSplitDataset = selectFirstSplitDataset(dataset);
diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx
index 96476373f..a17912e2d 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx
@@ -74,7 +74,7 @@ interface SeriesHoverContentProps {
   series: ConcreteSeries;
 }
 
-export const SeriesHoverContent: React.SFC<SeriesHoverContentProps> = props => {
+export const SeriesHoverContent: React.FunctionComponent<SeriesHoverContentProps> = props => {
   const { essence, range, series, dataset } = props;
   if (hasNominalSplit(essence)) {
     const entries = colorEntries(dataset, range, series, essence);
diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx
index 47dcb266f..fb56c510d 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx
@@ -51,7 +51,7 @@ function getChartsSelectors(essence: Essence, dataset: Dataset): Array<Unary<Dat
   });
 }
 
-export const ChartsPerSplit: React.SFC<ChartsPerSplit> = props => {
+export const ChartsPerSplit: React.FunctionComponent<ChartsPerSplit> = props => {
   const { interactions, xScale, xTicks, essence, dataset, stage } = props;
 
   const hasMultipleSeries = essence.series.count() > 1;
diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx
index 7780b1b88..1d37eec28 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx
@@ -26,7 +26,7 @@ interface LabelProps {
   datum: Datum;
 }
 
-export const Label: React.SFC<LabelProps> = props => {
+export const Label: React.FunctionComponent<LabelProps> = props => {
   const { essence, datum } = props;
   if (hasNominalSplit(essence)) {
     const nominalSplit = getNominalSplit(essence);
diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx
index 1f8626f1b..8e9751b01 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx
@@ -46,7 +46,7 @@ interface SplitChartProps {
   visualisationStage: Stage;
 }
 
-export const SplitChart: React.SFC<SplitChartProps> = props => {
+export const SplitChart: React.FunctionComponent<SplitChartProps> = props => {
   const { chartId, interactions, visualisationStage, chartStage, essence, xScale, xTicks, selectDatum, dataset } = props;
   const { interaction } = interactions;
   const splitDatum = selectDatum(dataset);
diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx
index dfdac60fb..e63f88b64 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx
@@ -37,7 +37,7 @@ interface ColoredSeriesProps {
   hasComparison: boolean;
 }
 
-const ColoredSeries: React.SFC<ColoredSeriesProps> = props => {
+const ColoredSeries: React.FunctionComponent<ColoredSeriesProps> = props => {
   const { datum, hasComparison, series } = props;
   const colorEntries = series.map((series, index) => {
     const color = NORMAL_COLORS[index];
@@ -47,7 +47,7 @@ const ColoredSeries: React.SFC<ColoredSeriesProps> = props => {
   return <ColorSwabs colorEntries={colorEntries} />;
 };
 
-export const SplitHoverContent: React.SFC<SplitHoverContentProps> = props => {
+export const SplitHoverContent: React.FunctionComponent<SplitHoverContentProps> = props => {
   const { essence, dataset, interaction: { range } } = props;
   const series = essence.getConcreteSeries().toArray();
   const hasComparison = essence.hasComparison();
diff --git a/src/client/visualizations/line-chart/charts/charts.tsx b/src/client/visualizations/line-chart/charts/charts.tsx
index dbff1c748..c5acba1de 100644
--- a/src/client/visualizations/line-chart/charts/charts.tsx
+++ b/src/client/visualizations/line-chart/charts/charts.tsx
@@ -35,7 +35,7 @@ interface ChartsProps {
   stage: Stage;
 }
 
-export const Charts: React.SFC<ChartsProps> = props => {
+export const Charts: React.FunctionComponent<ChartsProps> = props => {
   const { essence } = props;
   const { groupSeries } = essence.visualizationSettings as ImmutableRecord<LineChartSettings>;
 
diff --git a/src/client/visualizations/line-chart/legend/legend.tsx b/src/client/visualizations/line-chart/legend/legend.tsx
index f4607d76d..af7a99667 100644
--- a/src/client/visualizations/line-chart/legend/legend.tsx
+++ b/src/client/visualizations/line-chart/legend/legend.tsx
@@ -27,7 +27,7 @@ interface LegendValuesProps {
   values: string[];
 }
 
-const LegendValues: React.SFC<LegendValuesProps> = props => {
+const LegendValues: React.FunctionComponent<LegendValuesProps> = props => {
   const { values } = props;
   return <div className="legend-values">
     <table className="legend-values-table">
@@ -48,7 +48,7 @@ const LegendValues: React.SFC<LegendValuesProps> = props => {
   </div>;
 };
 
-export const Legend: React.SFC<LegendProps> = props => {
+export const Legend: React.FunctionComponent<LegendProps> = props => {
   const { values, title } = props;
 
   return <div className="line-chart-legend">
diff --git a/src/client/visualizations/line-chart/legend/series-legend.tsx b/src/client/visualizations/line-chart/legend/series-legend.tsx
index f609b47be..726a779e6 100644
--- a/src/client/visualizations/line-chart/legend/series-legend.tsx
+++ b/src/client/visualizations/line-chart/legend/series-legend.tsx
@@ -22,7 +22,7 @@ interface SeriesLegend {
   essence: Essence;
 }
 
-export const SeriesLegend: React.SFC<SeriesLegend> = props => {
+export const SeriesLegend: React.FunctionComponent<SeriesLegend> = props => {
   const { essence } = props;
   const series = essence.getConcreteSeries().toArray();
   const values = series.map(series => series.title());
diff --git a/src/client/visualizations/line-chart/legend/split-legend.tsx b/src/client/visualizations/line-chart/legend/split-legend.tsx
index 98aa117a4..c2fc9ae3c 100644
--- a/src/client/visualizations/line-chart/legend/split-legend.tsx
+++ b/src/client/visualizations/line-chart/legend/split-legend.tsx
@@ -26,7 +26,7 @@ interface SplitLegendProps {
   essence: Essence;
 }
 
-export const SplitLegend: React.SFC<SplitLegendProps> = props => {
+export const SplitLegend: React.FunctionComponent<SplitLegendProps> = props => {
   const { essence, dataset } = props;
   const legendSplit = essence.splits.splits.first();
 
diff --git a/src/client/visualizations/line-chart/x-axis/x-axis.tsx b/src/client/visualizations/line-chart/x-axis/x-axis.tsx
index 4d1cc7cd1..114e7db11 100644
--- a/src/client/visualizations/line-chart/x-axis/x-axis.tsx
+++ b/src/client/visualizations/line-chart/x-axis/x-axis.tsx
@@ -47,7 +47,7 @@ function labelFormatter(scale: ContinuousScale, timezone: Timezone): Unary<Date
   return (value: number) => String(floatFormat(value));
 }
 
-export const XAxis: React.SFC<XAxisProps> = props => {
+export const XAxis: React.FunctionComponent<XAxisProps> = props => {
   const { width, ticks, scale, timezone } = props;
   const stage = Stage.fromSize(width, X_AXIS_HEIGHT);
   const format = labelFormatter(scale, timezone);
diff --git a/src/client/visualizations/scatterplot/heatmap.tsx b/src/client/visualizations/scatterplot/heatmap.tsx
index 36f48204f..ea445edba 100644
--- a/src/client/visualizations/scatterplot/heatmap.tsx
+++ b/src/client/visualizations/scatterplot/heatmap.tsx
@@ -38,7 +38,7 @@ interface HeatmapProps {
 const COLOR_SCALE_START = "#fff";
 const COLOR_SCALE_END = "#90b5d0";
 
-export const Heatmap: React.SFC<HeatmapProps> = ({ xBinCount, yBinCount, xScale, yScale, stage, data, xSeries, ySeries }) => {
+export const Heatmap: React.FunctionComponent<HeatmapProps> = ({ xBinCount, yBinCount, xScale, yScale, stage, data, xSeries, ySeries }) => {
   const xQuantile = d3.scaleQuantile<number>().domain(xScale.domain()).range(range(0, xBinCount));
   const yQuantile = d3.scaleQuantile<number>().domain(yScale.domain()).range(range(0, yBinCount));
 
@@ -99,7 +99,7 @@ interface RectangleProps {
   fillColor: string;
 }
 
-const Rectangle: React.SFC<RectangleProps> = ({
+const Rectangle: React.FunctionComponent<RectangleProps> = ({
   xRange,
   yRange,
   xScale,
diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx
index 532b023de..94bb0bb3c 100644
--- a/src/client/visualizations/scatterplot/point.tsx
+++ b/src/client/visualizations/scatterplot/point.tsx
@@ -34,7 +34,7 @@ interface PointProps {
 const POINT_RADIUS = 3;
 const HOVER_AREA_RADIUS = 6;
 
-export const Point: React.SFC<PointProps> = ({ datum, xScale, yScale, xSeries, ySeries, setHover, resetHover }) => {
+export const Point: React.FunctionComponent<PointProps> = ({ datum, xScale, yScale, xSeries, ySeries, setHover, resetHover }) => {
   const xValue = xSeries.selectValue(datum);
   const yValue = ySeries.selectValue(datum);
 
diff --git a/src/client/visualizations/scatterplot/tooltip.tsx b/src/client/visualizations/scatterplot/tooltip.tsx
index a83ccb949..ad518b81d 100644
--- a/src/client/visualizations/scatterplot/tooltip.tsx
+++ b/src/client/visualizations/scatterplot/tooltip.tsx
@@ -43,7 +43,7 @@ interface TooltipProps {
 const TOOLTIP_OFFSET_Y = 50;
 const TOOLTIP_OFFSET_X = 100;
 
-export const Tooltip: React.SFC<TooltipProps> = ({
+export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   datum,
   stage,
   xSeries,
diff --git a/src/client/visualizations/scatterplot/x-axis.tsx b/src/client/visualizations/scatterplot/x-axis.tsx
index e48683bf0..e74133daa 100644
--- a/src/client/visualizations/scatterplot/x-axis.tsx
+++ b/src/client/visualizations/scatterplot/x-axis.tsx
@@ -32,7 +32,7 @@ interface XAxisProps {
   formatter: Unary<number, string>;
 }
 
-export const XAxis: React.SFC<XAxisProps> = ({ stage, ticks, scale, formatter, tickSize }) => {
+export const XAxis: React.FunctionComponent<XAxisProps> = ({ stage, ticks, scale, formatter, tickSize }) => {
   const labelY = tickSize + TEXT_OFFSET_X;
   const linePositionY = roundToHalfPx(0);
   const lines = ticks.map((tick: number) => {
diff --git a/src/client/visualizations/scatterplot/y-axis.tsx b/src/client/visualizations/scatterplot/y-axis.tsx
index 85c3a2625..cb3c6691d 100644
--- a/src/client/visualizations/scatterplot/y-axis.tsx
+++ b/src/client/visualizations/scatterplot/y-axis.tsx
@@ -32,7 +32,7 @@ interface YAxisProps {
   formatter: Unary<number, string>;
 }
 
-export const YAxis: React.SFC<YAxisProps> = ({ formatter, stage, tickSize, ticks, scale }) => {
+export const YAxis: React.FunctionComponent<YAxisProps> = ({ formatter, stage, tickSize, ticks, scale }) => {
   const linePositionX = roundToHalfPx(stage.width);
 
   const lines = ticks.map((tick: number) => {
diff --git a/src/client/visualizations/table/body/splits/nested-splits.tsx b/src/client/visualizations/table/body/splits/nested-splits.tsx
index 4638d9f7a..1ff4d9dc3 100644
--- a/src/client/visualizations/table/body/splits/nested-splits.tsx
+++ b/src/client/visualizations/table/body/splits/nested-splits.tsx
@@ -32,7 +32,7 @@ interface NestedSplitsProps {
   highlightedRowIndex: number | null;
 }
 
-export const NestedSplits: React.SFC<NestedSplitsProps> = props => {
+export const NestedSplits: React.FunctionComponent<NestedSplitsProps> = props => {
   const { essence, data, highlightedRowIndex, hoverRow, visibleRowsIndexRange, segmentWidth } = props;
 
   return <div className="nested-splits-rows">
diff --git a/src/client/visualizations/table/body/splits/split-rows.tsx b/src/client/visualizations/table/body/splits/split-rows.tsx
index 1391b3659..8f00eafde 100644
--- a/src/client/visualizations/table/body/splits/split-rows.tsx
+++ b/src/client/visualizations/table/body/splits/split-rows.tsx
@@ -31,7 +31,7 @@ interface SplitRowsProps {
   highlightedRowIndex: number | null;
 }
 
-export const SplitRows: React.SFC<SplitRowsProps> = props => {
+export const SplitRows: React.FunctionComponent<SplitRowsProps> = props => {
   const { collapseRows, ...rest } = props;
   const { data, essence: { timezone, splits: { splits } } } = rest;
   if (!data) return null;
diff --git a/src/client/visualizations/table/header/splits/combined-splits-title.tsx b/src/client/visualizations/table/header/splits/combined-splits-title.tsx
index 8209d5538..ae23126be 100644
--- a/src/client/visualizations/table/header/splits/combined-splits-title.tsx
+++ b/src/client/visualizations/table/header/splits/combined-splits-title.tsx
@@ -25,7 +25,7 @@ interface CombinedSplitsTitle {
   splits: Splits;
 }
 
-export const CombinedSplitsTitle: React.SFC<CombinedSplitsTitle> = ({ dataCube, splits: { splits } }) => {
+export const CombinedSplitsTitle: React.FunctionComponent<CombinedSplitsTitle> = ({ dataCube, splits: { splits } }) => {
   const title = splits.map(split => findDimensionByName(dataCube.dimensions, split.reference).title).join(", ");
   return <Corner>{title}</Corner>;
 };
diff --git a/src/client/visualizations/table/header/splits/splits-header.tsx b/src/client/visualizations/table/header/splits/splits-header.tsx
index 631316595..b3374c433 100644
--- a/src/client/visualizations/table/header/splits/splits-header.tsx
+++ b/src/client/visualizations/table/header/splits/splits-header.tsx
@@ -24,7 +24,7 @@ interface SplitHeaderProps {
   collapseRows: boolean;
 }
 
-export const SplitsHeader: React.SFC<SplitHeaderProps> = ({ essence, collapseRows }) => {
+export const SplitsHeader: React.FunctionComponent<SplitHeaderProps> = ({ essence, collapseRows }) => {
   const { dataCube, splits } = essence;
   return collapseRows ?
     <SplitColumnsHeader dataCube={dataCube} splits={splits} /> :
diff --git a/src/client/visualizations/table/highlight/highlight.tsx b/src/client/visualizations/table/highlight/highlight.tsx
index da644123f..dfe81e84d 100644
--- a/src/client/visualizations/table/highlight/highlight.tsx
+++ b/src/client/visualizations/table/highlight/highlight.tsx
@@ -25,7 +25,7 @@ interface HighlighterProps {
   collapseRows: boolean;
 }
 
-export const Highlighter: React.SFC<HighlighterProps> = props => {
+export const Highlighter: React.FunctionComponent<HighlighterProps> = props => {
   const { highlightedIndex, scrollTopOffset, highlightedNesting, collapseRows } = props;
   const top = highlightedIndex * ROW_HEIGHT - scrollTopOffset;
   const left = collapseRows ? 0 : Math.max(0, highlightedNesting - 1) * INDENT_WIDTH;
diff --git a/src/client/visualizations/table/scrolled-table/scrolled-table.tsx b/src/client/visualizations/table/scrolled-table/scrolled-table.tsx
index 31b7388ec..47458cb6b 100644
--- a/src/client/visualizations/table/scrolled-table/scrolled-table.tsx
+++ b/src/client/visualizations/table/scrolled-table/scrolled-table.tsx
@@ -58,7 +58,7 @@ interface ScrolledTableProps {
   availableWidth: number;
 }
 
-export const ScrolledTable: React.SFC<ScrolledTableProps> = props => {
+export const ScrolledTable: React.FunctionComponent<ScrolledTableProps> = props => {
   const {
     essence,
     stage,
diff --git a/src/client/visualizations/totals/total.tsx b/src/client/visualizations/totals/total.tsx
index 87ead44b1..334d637e7 100644
--- a/src/client/visualizations/totals/total.tsx
+++ b/src/client/visualizations/totals/total.tsx
@@ -25,7 +25,7 @@ interface DifferenceProps {
   series: ConcreteSeries;
 }
 
-const Difference: React.SFC<DifferenceProps> = ({ datum, series }) => {
+const Difference: React.FunctionComponent<DifferenceProps> = ({ datum, series }) => {
   return <React.Fragment>
     <div className="measure-value measure-value--previous">
       {series.formatValue(datum, SeriesDerivation.PREVIOUS)}
@@ -46,7 +46,7 @@ export interface TotalProps {
   series: ConcreteSeries;
 }
 
-export const Total: React.SFC<TotalProps> = ({ showPrevious, datum, series }) => {
+export const Total: React.FunctionComponent<TotalProps> = ({ showPrevious, datum, series }) => {
   return <div className="total">
     <div className="measure-name" title={series.title()}>{series.title()}</div>
     <div className="measure-value">{series.formatValue(datum, SeriesDerivation.CURRENT)}</div>
diff --git a/src/client/visualizations/totals/totals.tsx b/src/client/visualizations/totals/totals.tsx
index 5224e195e..8e346feca 100644
--- a/src/client/visualizations/totals/totals.tsx
+++ b/src/client/visualizations/totals/totals.tsx
@@ -22,7 +22,7 @@ import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "..
 import { Total } from "./total";
 import "./totals.scss";
 
-const BigNumbers: React.SFC<ChartProps> = ({ essence, data }) => {
+const BigNumbers: React.FunctionComponent<ChartProps> = ({ essence, data }) => {
   const series = essence.getConcreteSeries().toArray();
   const datum = data.data[0];
   return <div className="total-container">
diff --git a/src/common/models/visualization-settings/visualization-settings.ts b/src/common/models/visualization-settings/visualization-settings.ts
index bde8ca68a..01520c5fd 100644
--- a/src/common/models/visualization-settings/visualization-settings.ts
+++ b/src/common/models/visualization-settings/visualization-settings.ts
@@ -23,7 +23,7 @@ interface VisualizationSettingsComponentProps<T> {
   settings: ImmutableRecord<T>;
 }
 
-export type VisualizationSettingsComponent<T> = React.SFC<VisualizationSettingsComponentProps<T>>;
+export type VisualizationSettingsComponent<T> = React.FunctionComponent<VisualizationSettingsComponentProps<T>>;
 
 interface VisualizationSettingsConverter<T> {
   print: Unary<T, object>;