diff --git a/apps/fabric-website/src/components/App/App.tsx b/apps/fabric-website/src/components/App/App.tsx
index e8f2ddcc338765..38b5c98c5e03ad 100644
--- a/apps/fabric-website/src/components/App/App.tsx
+++ b/apps/fabric-website/src/components/App/App.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import './App.scss';
 import { AppState } from './AppState';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import AttachedScrollUtility from '../../utilities/AttachedScrollUtility';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { Nav } from '../Nav/Nav';
@@ -75,8 +74,7 @@ export class App extends React.Component<IAppProps, any> {
     );
   }
 
-  @autobind
-  private _handleNavPositioning() {
+  private _handleNavPositioning = () => {
     let { isAttached, navHeight } = this.state;
     this._appContentRect = this._appContent && this._appContent.getBoundingClientRect();
     const viewPortHeight = window.innerHeight;
diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx
index f2c71d9439c075..c381a5fd8980a8 100644
--- a/apps/todo-app/src/components/TodoForm.tsx
+++ b/apps/todo-app/src/components/TodoForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { autobind, BaseComponent, IBaseProps, createRef } from 'office-ui-fabric-react/lib/Utilities';
+import { BaseComponent, IBaseProps, createRef } from 'office-ui-fabric-react/lib/Utilities';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
 import * as stylesImport from './Todo.scss';
@@ -78,8 +78,7 @@ export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormSta
     );
   }
 
-  @autobind
-  private _onSubmit(event: React.FormEvent<HTMLElement>): void {
+  private _onSubmit = (event: React.FormEvent<HTMLElement>): void => {
     event.preventDefault();
 
     const { value: textField } = this._textField;
diff --git a/apps/todo-app/src/components/TodoTabs.tsx b/apps/todo-app/src/components/TodoTabs.tsx
index 1905304763535a..62ba76a273e82a 100644
--- a/apps/todo-app/src/components/TodoTabs.tsx
+++ b/apps/todo-app/src/components/TodoTabs.tsx
@@ -7,7 +7,7 @@ import {
 } from 'office-ui-fabric-react/lib/Pivot';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import { List } from 'office-ui-fabric-react/lib/List';
-import { KeyCodes, autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { KeyCodes } from 'office-ui-fabric-react/lib/Utilities';
 import TodoItem from './TodoItem';
 import { ITodoItem, ITodoItemProps, ITodoTabsProps } from '../types/index';
 
@@ -73,8 +73,7 @@ export default class TodoTabs extends React.Component<ITodoTabsProps, {}> {
     );
   }
 
-  @autobind
-  private _isInnerZoneKeystroke(ev: React.KeyboardEvent<HTMLElement>): boolean {
+  private _isInnerZoneKeystroke = (ev: React.KeyboardEvent<HTMLElement>): boolean => {
     return ev.which === KeyCodes.right;
   }
 
diff --git a/common/changes/@uifabric/example-app-base/retire-autobind_2018-03-17-15-50.json b/common/changes/@uifabric/example-app-base/retire-autobind_2018-03-17-15-50.json
new file mode 100644
index 00000000000000..16c3ecf1205f38
--- /dev/null
+++ b/common/changes/@uifabric/example-app-base/retire-autobind_2018-03-17-15-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Use arrow function properties instead of @autobind",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/retire-autobind_2018-03-17-15-50.json b/common/changes/@uifabric/experiments/retire-autobind_2018-03-17-15-50.json
new file mode 100644
index 00000000000000..8913998ae14afa
--- /dev/null
+++ b/common/changes/@uifabric/experiments/retire-autobind_2018-03-17-15-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Use arrow function properties instead of @autobind",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/fabric-website/retire-autobind_2018-03-17-15-50.json b/common/changes/@uifabric/fabric-website/retire-autobind_2018-03-17-15-50.json
new file mode 100644
index 00000000000000..ee8ddbad800393
--- /dev/null
+++ b/common/changes/@uifabric/fabric-website/retire-autobind_2018-03-17-15-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Use arrow function properties instead of @autobind",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/retire-autobind_2018-03-17-15-50.json b/common/changes/@uifabric/utilities/retire-autobind_2018-03-17-15-50.json
new file mode 100644
index 00000000000000..6ee10a304e0947
--- /dev/null
+++ b/common/changes/@uifabric/utilities/retire-autobind_2018-03-17-15-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Use arrow function properties instead of @autobind",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/retire-autobind_2018-03-17-15-50.json b/common/changes/office-ui-fabric-react/retire-autobind_2018-03-17-15-50.json
new file mode 100644
index 00000000000000..071c5ddd6dee24
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/retire-autobind_2018-03-17-15-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Use arrow function properties instead of @autobind",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/common/changes/todo-app/retire-autobind_2018-03-17-15-50.json b/common/changes/todo-app/retire-autobind_2018-03-17-15-50.json
new file mode 100644
index 00000000000000..e00f2578a18d72
--- /dev/null
+++ b/common/changes/todo-app/retire-autobind_2018-03-17-15-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "todo-app",
+      "comment": "Use arrow function properties instead of @autobind",
+      "type": "patch"
+    }
+  ],
+  "packageName": "todo-app",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file
diff --git a/ghdocs/BESTPRACTICES.md b/ghdocs/BESTPRACTICES.md
index 9b8481f5b30cc3..5991e007a5e69c 100644
--- a/ghdocs/BESTPRACTICES.md
+++ b/ghdocs/BESTPRACTICES.md
@@ -123,21 +123,38 @@ BAD:
 GOOD:
 `onRenderItem: IRenderFunction<IItemProps>`
 
-## Use @autobind. Avoid ALL binds in templates
+## Use arrow function properties to avoid ALL binds in templates
 
-The autobind decorator simplifies making event callbacks "bound" to the instance. It's easy to use:
+When we use bind in a template, it means that the function is recreated every time, which is an anti-pattern.
 
+BAD:
 ```typescript
 class Foo {
 
-  @autobind
   public _onClick(ev: React.MouseEvent) {
   }
 
+  render() {
+    <button onClick={this._onClick.bind(this)}>Click me</button
+  }
+
 }
 ```
 
-When we use bind in a template, it means that the function is recreated every time, which is an anti-pattern.
+Instead we can use an arrow function property as it will always be bound to the component.
+
+GOOD:
+```typescript
+class Foo {
+
+  public _onClick = (ev: React.MouseEvent) => {
+  }
+
+  render() {
+    <button onClick={this._onClick}>Click me</button
+  }
+}
+```
 
 ## For gathering refs, avoid string refs, use resolve functions
 
@@ -189,7 +206,7 @@ class Foo extends BaseComponent<...> {
     // Set the reference by passing the reference object as the ref prop
     return <button ref={ _root } onClick={this._onClick} />;
   }
-  
+
   private _onClick() {
     // Access the reference through the .value property on the reference object
     this._root.value.focus();
@@ -270,8 +287,7 @@ class ItemComponent extends React.Component<...> {
     );
   }
 
-  @autobind
-  _onClick(ev: MouseEvent) {
+  _onClick = (ev: MouseEvent) => {
 
   }
 }
diff --git a/packages/example-app-base/src/components/App/App.tsx b/packages/example-app-base/src/components/App/App.tsx
index 2f11e46d48f18b..fa0b274eb093ec 100644
--- a/packages/example-app-base/src/components/App/App.tsx
+++ b/packages/example-app-base/src/components/App/App.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   css
 } from 'office-ui-fabric-react/lib/Utilities';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { Nav } from 'office-ui-fabric-react/lib/Nav';
@@ -108,19 +107,16 @@ export class App extends React.Component<IAppProps, IAppState> {
     );
   }
 
-  @autobind
-  private _onIsMenuVisibleChanged(isMenuVisible: boolean): void {
+  private _onIsMenuVisibleChanged = (isMenuVisible: boolean): void => {
     this.setState({ isMenuVisible });
   }
 
-  @autobind
-  private _onLinkClick(): void {
+  private _onLinkClick = (): void => {
     this.setState({ isMenuVisible: false });
   }
 
-  @autobind
   // tslint:disable-next-line:no-any
-  private _onRenderLink(link: INavLink): any {
+  private _onRenderLink = (link: INavLink): any => {
     return (
       [
         <span key={ 1 } className='Nav-linkText'>{ link.name }</span>,
diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
index ebebfacc0fa625..ed460e5a82c226 100644
--- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   css,
-  autobind,
   customizable
 } from 'office-ui-fabric-react/lib/Utilities';
 import {
@@ -157,8 +156,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
     return [primaryKey, farKey, overflowKey].join(' ');
   }
 
-  @autobind
-  private _onReduceData(data: ICommandBarData): ICommandBarData | undefined {
+  private _onReduceData = (data: ICommandBarData): ICommandBarData | undefined => {
     const { endAligned, onDataReduced } = this.props;
     let { primaryItems, overflowItems, cacheKey, farItems } = data;
 
@@ -182,8 +180,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
     return undefined;
   }
 
-  @autobind
-  private _onGrowData(data: ICommandBarData): ICommandBarData | undefined {
+  private _onGrowData = (data: ICommandBarData): ICommandBarData | undefined => {
     const { endAligned, onDataGrown } = this.props;
     let { primaryItems, overflowItems, cacheKey, minimumOverflowItems, farItems } = data;
     const movedItem = overflowItems[0];
@@ -207,8 +204,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
     return undefined;
   }
 
-  @autobind
-  private _onRenderItems(item: ICommandBarItemProps): JSX.Element | React.ReactNode {
+  private _onRenderItems = (item: ICommandBarItemProps): JSX.Element | React.ReactNode => {
     let { buttonStyles } = this.props;
 
     if (item.onRender) {
@@ -235,8 +231,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
     return this._onRenderButton(commandButtonProps);
   }
 
-  @autobind
-  private _onRenderButton(props: ICommandBarItemProps): JSX.Element {
+  private _onRenderButton = (props: ICommandBarItemProps): JSX.Element => {
     // tslint:disable-next-line:no-any
     return <CommandBarButton { ...props as any } />;
   }
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
index 8268e739d052a8..a58c0b6ebdda69 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css,
 } from '../../Utilities';
 import {
@@ -133,8 +132,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     );
   }
 
-  @autobind
-  protected onSelectionChange(): void {
+  protected onSelectionChange = (): void => {
     this.forceUpdate();
   }
 
@@ -179,13 +177,11 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     }
   }
 
-  @autobind
-  protected onInputChange(value: string): void {
+  protected onInputChange = (value: string): void => {
     this.floatingPicker.onQueryStringChanged(value);
   }
 
-  @autobind
-  protected onInputFocus(ev: React.FocusEvent<HTMLInputElement | Autofill>): void {
+  protected onInputFocus = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {
     this.selectedItemsList.unselectAll();
     this.floatingPicker.showPicker();
 
@@ -196,8 +192,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
 
   // This is protected because we may expect the backspace key to work differently in a different kind of picker.
   // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
-  @autobind
-  protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void {
+  protected onBackspace = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which !== KeyCodes.backspace) {
       return;
     }
@@ -209,14 +204,12 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     }
   }
 
-  @autobind
-  protected onCopy(ev: React.ClipboardEvent<HTMLElement>): void {
+  protected onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {
     // Pass it down into the selected items list
     this.selectedItemsList.onCopy(ev);
   }
 
-  @autobind
-  protected onPaste(ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void {
+  protected onPaste = (ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void => {
     if (this.props.onPaste) {
       let inputText = ev.clipboardData.getData('Text');
       ev.preventDefault();
@@ -224,8 +217,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     }
   }
 
-  @autobind
-  protected _isFocusZoneInnerKeystroke(ev: React.KeyboardEvent<HTMLElement>): boolean {
+  protected _isFocusZoneInnerKeystroke = (ev: React.KeyboardEvent<HTMLElement>): boolean => {
     // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone.
     if (this.floatingPicker.isSuggestionsShown) {
       switch (ev.which) {
@@ -243,8 +235,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     return false;
   }
 
-  @autobind
-  protected _onSuggestionSelected(item: T): void {
+  protected _onSuggestionSelected = (item: T): void => {
     this.selectedItemsList.addItems([item]);
     if (this.props.onItemSelected) {
       this.props.onItemSelected(item);
@@ -255,8 +246,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     this.focus();
   }
 
-  @autobind
-  protected _onSelectedItemsChanged(): void {
+  protected _onSelectedItemsChanged = (): void => {
     this.focus();
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
index e7457593e83e8b..41f131f8399a98 100644
--- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
+++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css,
   getRTL,
   createRef
@@ -127,8 +126,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     this._unbindFromInputElement();
   }
 
-  @autobind
-  public dismissSuggestions(): void {
+  public dismissSuggestions = (): void => {
     this.setState({ suggestionsVisible: false });
   }
 
@@ -138,8 +136,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     }
   }
 
-  @autobind
-  public refocusSuggestions(keyCode: KeyCodes): void {
+  public refocusSuggestions = (keyCode: KeyCodes): void => {
     if (this.suggestionStore.suggestions && this.suggestionStore.suggestions.length > 0) {
       if (keyCode === KeyCodes.up) {
         this.suggestionStore.setSelectedSuggestion(
@@ -320,29 +317,26 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     }
   }
 
-  @autobind
-  protected onSuggestionClick(
+  protected onSuggestionClick = (
     ev: React.MouseEvent<HTMLElement>,
     item: T,
     index: number
-  ): void {
+  ): void => {
     this.onChange(item);
   }
 
-  @autobind
-  protected onSuggestionRemove(
+  protected onSuggestionRemove = (
     ev: React.MouseEvent<HTMLElement>,
     item: T,
     index: number
-  ): void {
+  ): void => {
     if (this.props.onRemoveSuggestion) {
       (this.props.onRemoveSuggestion as ((item: T) => void))(item);
     }
     this.suggestionStore.removeSuggestion(index);
   }
 
-  @autobind
-  protected onKeyDown(ev: MouseEvent): void {
+  protected onKeyDown = (ev: MouseEvent): void => {
     if (!this.state.suggestionsVisible ||
       (this.props.inputElement &&
         !(this.props.inputElement as HTMLElement).contains(ev.target as HTMLElement))) {
@@ -438,8 +432,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     }
   }
 
-  @autobind
-  protected onGetMoreResults(): void {
+  protected onGetMoreResults = (): void => {
     this.setState(
       {
         isSearching: true
@@ -487,8 +480,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     }
   }
 
-  @autobind
-  private _onValidateInput(): void {
+  private _onValidateInput = (): void => {
     if (
       this.props.onValidateInput &&
       this.props.createGenericItem
@@ -505,8 +497,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     }
   }
 
-  @autobind
-  private _showForceResolve(): boolean {
+  private _showForceResolve = (): boolean => {
     return this.props.showForceResolve ? this.props.showForceResolve() : false;
   }
 
diff --git a/packages/experiments/src/components/Form/Form.tsx b/packages/experiments/src/components/Form/Form.tsx
index ea9b3c8f7badc4..21dc6a6ec8995e 100644
--- a/packages/experiments/src/components/Form/Form.tsx
+++ b/packages/experiments/src/components/Form/Form.tsx
@@ -9,7 +9,6 @@ import { GenericFormInput } from './FormBaseInput';
 
 // Utilities
 import {
-  autobind,
   BaseComponent,
   getNativeProps,
   divProperties
@@ -106,7 +105,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
     let nativeProps = getNativeProps(this.props, divProperties);
     return (
       <form
-        {...nativeProps}
+        { ...nativeProps }
         onSubmit={ this._onSubmit }
       >
         { this.props.children }
@@ -177,8 +176,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * When the form is submitted. This will validate the form and call the appropriate submit callback
    * @param event The form event
    */
-  @autobind
-  private _onSubmit(event: React.FormEvent<HTMLElement>): void {
+  private _onSubmit = (event: React.FormEvent<HTMLElement>): void => {
     event.preventDefault();
     if (this._pristine) {
       this._pristine = false;
@@ -201,8 +199,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * Register an input with the form
    * @param input The input to register
    */
-  @autobind
-  private _mountInput(input: GenericFormInput): void {
+  private _mountInput = (input: GenericFormInput): void => {
     if (this._mountedInputs.indexOf(input) === -1) {
       this._mountedInputs.push(input);
       this.setState((prevState: IFormState) => {
@@ -212,8 +209,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
     }
   }
 
-  @autobind
-  private _submitValue(input: GenericFormInput): void {
+  private _submitValue = (input: GenericFormInput): void => {
     let validationResult: IFormValidationResult = this._validateComponent(input);
     this.setState((prevState: IFormState) => {
       prevState.validationResults[input.props.inputKey] = validationResult;
@@ -231,8 +227,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * Unregister an input with the form
    * @param input The input to unregister
    */
-  @autobind
-  private _unmountInput(input: GenericFormInput): void {
+  private _unmountInput = (input: GenericFormInput): void => {
     let currentIndex: number = this._mountedInputs.indexOf(input);
     if (currentIndex > -1) {
       this._mountedInputs.splice(currentIndex, 1);
@@ -243,8 +238,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
     }
   }
 
-  @autobind
-  private _isFormValid(validationResults: { [key: string]: IFormValidationResult } = this.state.validationResults): boolean {
+  private _isFormValid = (validationResults: { [key: string]: IFormValidationResult } = this.state.validationResults): boolean => {
     for (let key in validationResults) {
       if (!validationResults[key].isValid) {
         return false;
diff --git a/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.tsx b/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.tsx
index 8fda99d34b8eee..d79e9c750c69be 100644
--- a/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.tsx
+++ b/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.tsx
@@ -6,9 +6,6 @@ import { IFormCheckBoxProps } from './FormCheckBox.types';
 import { FormBaseInput, IFormBaseInputState } from '../../FormBaseInput';
 import { IFormContext } from '../../Form';
 
-// Utilities
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
-
 /**
  * Checkbox input for the Form. Displays a boolean value as a checkbox
  */
@@ -31,7 +28,7 @@ export class FormCheckBox extends FormBaseInput<boolean, IFormCheckBoxProps, IFo
   public render(): JSX.Element {
     return (
       <Checkbox
-        {...this.props.checkboxProps}
+        { ...this.props.checkboxProps }
         key={ this.props.inputKey }
         onChange={ this._onChange }
         checked={ this.state.currentValue }
@@ -39,8 +36,7 @@ export class FormCheckBox extends FormBaseInput<boolean, IFormCheckBoxProps, IFo
     );
   }
 
-  @autobind
-  private _onChange(event: React.FormEvent<HTMLElement>, isChecked: boolean): void {
+  private _onChange = (event: React.FormEvent<HTMLElement>, isChecked: boolean): void => {
     this.setValue(isChecked);
   }
 
diff --git a/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.tsx b/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.tsx
index a130f680a3e595..453bb389739d19 100644
--- a/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.tsx
+++ b/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.tsx
@@ -13,7 +13,7 @@ import { FormBaseInput, IFormBaseInputState } from '../../FormBaseInput';
 import { IFormContext } from '../../Form';
 
 // Utilities
-import { autobind, css } from 'office-ui-fabric-react/lib/Utilities';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 
 /**
  * DatePicker input for Form
@@ -38,7 +38,7 @@ export class FormDatePicker extends FormBaseInput<Date, IFormDatePickerProps, IF
     return (
       <div className={ css('form-date-picker', DatePickerStyles.formDatePicker) }>
         <DatePicker
-          {...this.props.datePickerProps}
+          { ...this.props.datePickerProps }
           // These props cannot be overridden
           key={ this.props.inputKey }
           value={ this.state.currentValue }
@@ -58,8 +58,7 @@ export class FormDatePicker extends FormBaseInput<Date, IFormDatePickerProps, IF
     );
   }
 
-  @autobind
-  private _onDateChanged(date: Date): void {
+  private _onDateChanged = (date: Date): void => {
     this.setValue(date);
   }
 
diff --git a/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.tsx b/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.tsx
index 9d18a9edc59436..918f7b0984578d 100644
--- a/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.tsx
+++ b/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.tsx
@@ -6,9 +6,6 @@ import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-reac
 import { FormBaseInput, IFormBaseInputState } from '../../FormBaseInput';
 import { IFormContext } from '../../Form';
 
-// Utilities
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
-
 /**
  * Dropdown input for Form
  */
@@ -35,7 +32,7 @@ export class FormDropdown extends FormBaseInput<number | string, IFormDropdownPr
   public render(): JSX.Element {
     return (
       <Dropdown
-        {...this.props.dropdownProps}
+        { ...this.props.dropdownProps }
 
         // These props cannot be overridden
         key={ this.props.inputKey }
@@ -45,8 +42,7 @@ export class FormDropdown extends FormBaseInput<number | string, IFormDropdownPr
     );
   }
 
-  @autobind
-  private _onChanged(option: IDropdownOption): void {
+  private _onChanged = (option: IDropdownOption): void => {
     this.setValue(option.key);
   }
 
diff --git a/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.tsx b/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.tsx
index f9230e3cab7bf9..c237493ea88dae 100644
--- a/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.tsx
+++ b/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.tsx
@@ -6,9 +6,6 @@ import { FormBaseInput, IFormBaseInputState } from '../../FormBaseInput';
 import { IFormContext } from '../../Form';
 import { TextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
 
-// Utilities
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
-
 /**
  * TextBox input for the Form.
  */
@@ -38,7 +35,7 @@ export class FormTextInput extends FormBaseInput<string, IFormTextInputProps, IF
   public render(): JSX.Element {
     return (
       <TextField
-        {...this.props.textFieldProps}
+        { ...this.props.textFieldProps }
         key={ this.props.inputKey }
         value={ this.state.currentValue }
         onBeforeChange={ this._onChange }
@@ -47,8 +44,7 @@ export class FormTextInput extends FormBaseInput<string, IFormTextInputProps, IF
     );
   }
 
-  @autobind
-  private _onChange(value: string): void {
+  private _onChange = (value: string): void => {
     this.setValue(value);
   }
 
diff --git a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
index 806b1128325526..19a1f657d123db 100644
--- a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
+++ b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { IKeytipLayerProps } from './KeytipLayer.types';
 import { Keytip, IKeytipProps, KeytipTransitionModifier } from '../Keytip';
 import {
-  autobind,
   BaseComponent
 } from '../../Utilities';
 import { Layer } from 'office-ui-fabric-react/lib/Layer';
@@ -191,16 +190,14 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
     this.setState({ inKeytipMode: true });
   }
 
-  @autobind
-  private _onDismiss(ev?: React.MouseEvent<HTMLElement>): void {
+  private _onDismiss = (ev?: React.MouseEvent<HTMLElement>): void => {
     // if we are in keytip mode, then exit keytip mode
     if (this.state.inKeytipMode) {
       this._keytipManager.exitKeytipMode();
     }
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     switch (ev.which) {
       case KeyCodes.alt:
         // ALT puts focus in the browser bar, so it should not be used as a key for keytips.
@@ -240,8 +237,7 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
     return modifierKeys.length ? modifierKeys : undefined;
   }
 
-  @autobind
-  private _onKeyPress(ev: React.KeyboardEvent<HTMLElement>): void {
+  private _onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => {
     // Call processInput
     this._keytipManager.processInput(ev.key);
   }
diff --git a/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx b/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx
index f2ffe14b5ee9a6..8c68604746cd3a 100644
--- a/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx
+++ b/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { ILayoutGroupProps } from './LayoutGroup.types';
 import { IRawStyle, mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 import {
-  autobind,
   getNativeProps,
   divProperties
 } from 'office-ui-fabric-react/lib/Utilities';
@@ -76,8 +75,7 @@ export class LayoutGroup extends React.Component<ILayoutGroupProps, {}> {
     );
   }
 
-  @autobind
-  private _getJustify(justify: string | undefined): string {
+  private _getJustify = (justify: string | undefined): string => {
     if (justify === 'end') {
       return 'flex-end';
     } else if (justify === 'center') {
diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
index b288ae1690b02d..f3116a45f136e0 100644
--- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  KeyCodes,
-  autobind,
+  KeyCodes
 } from '../../Utilities';
 import { Selection } from 'office-ui-fabric-react/lib/Selection';
 
@@ -44,8 +43,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     return this.state.items;
   }
 
-  @autobind
-  public addItems(items: T[]): void {
+  public addItems = (items: T[]): void => {
     // tslint:disable-next-line:no-any
     let processedItems: T[] | PromiseLike<T[]> = this.props.onItemSelected ? (this.props.onItemSelected as any)(items) : items;
 
@@ -64,8 +62,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     this.setState({ suggestedDisplayValue: '' });
   }
 
-  @autobind
-  public removeItemAt(index: number): void {
+  public removeItemAt = (index: number): void => {
     let { items } = this.state;
     // tslint:disable-next-line:no-any
     if (index > -1) {
@@ -74,8 +71,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  @autobind
-  public onCopy(ev: React.ClipboardEvent<HTMLElement>): void {
+  public onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {
     if (this.props.onCopyItems && this.selection.getSelectedCount() > 0) {
       let selectedItems: T[] = this.selection.getSelection() as T[];
       this.copyItems(selectedItems);
@@ -113,8 +109,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     return this.renderItems();
   }
 
-  @autobind
-  protected renderItems(): JSX.Element[] {
+  protected renderItems = (): JSX.Element[] => {
     let { removeButtonAriaLabel } = this.props;
     let onRenderItem = this.props.onRenderItem as (props: ISelectedItemProps<T>) => JSX.Element;
 
@@ -132,8 +127,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }));
   }
 
-  @autobind
-  protected onSelectionChanged(): void {
+  protected onSelectionChanged = (): void => {
     this.forceUpdate();
   }
 
@@ -143,8 +137,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  @autobind
-  protected onKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
+  protected onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     switch (ev.which) {
       case KeyCodes.backspace:
         ev.stopPropagation();
@@ -156,8 +149,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  @autobind
-  protected onItemChange(changedItem: T, index: number): void {
+  protected onItemChange = (changedItem: T, index: number): void => {
     let { items } = this.state;
 
     if (index >= 0) {
@@ -168,8 +160,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  @autobind
-  protected removeItem(item: ISelectedItemProps<T>): void {
+  protected removeItem = (item: ISelectedItemProps<T>): void => {
     let { items } = this.state;
     let index: number = items.indexOf(item);
 
@@ -179,9 +170,8 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  @autobind
   // tslint:disable-next-line:no-any
-  protected removeItems(itemsToRemove: any[]): void {
+  protected removeItems = (itemsToRemove: any[]): void => {
     let { items } = this.state;
     // tslint:disable-next-line:no-any
     let newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
index 77b3c9fe43d6b2..3b85c9b304318e 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   getId,
   getNativeProps,
   inputProperties,
@@ -44,7 +43,6 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
     this._floatingPickerProps = this.props.floatingPickerProps as IBaseFloatingPickerProps<IExtendedPersonaProps>;
   }
 
-  @autobind
   public componentDidMount(): void {
     let getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string;
     let itemText = getEditingItemText(this.props.item);
@@ -53,7 +51,6 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
     this._editingInput.focus();
   }
 
-  @autobind
   public render(): JSX.Element {
     const itemId = getId();
     const nativeProps = getNativeProps(this.props, inputProperties);
@@ -76,8 +73,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
       </div>);
   }
 
-  @autobind
-  private _renderEditingSuggestions(): JSX.Element {
+  private _renderEditingSuggestions = (): JSX.Element => {
     let onRenderFloatingPicker = this._onRenderFloatingPicker;
     return (onRenderFloatingPicker({
       componentRef: this._editingFloatingPicker,
@@ -88,20 +84,17 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
     }));
   }
 
-  @autobind
-  private _resolveInputRef(ref: HTMLInputElement): void {
+  private _resolveInputRef = (ref: HTMLInputElement): void => {
     this._editingInput = ref;
 
     this.forceUpdate(() => { this._editingInput.focus(); });
   }
 
-  @autobind
-  private _onInputClick(): void {
+  private _onInputClick = (): void => {
     this._editingFloatingPicker.value && this._editingFloatingPicker.value.showPicker();
   }
 
-  @autobind
-  private _onInputBlur(ev: React.FocusEvent<HTMLElement>): void {
+  private _onInputBlur = (ev: React.FocusEvent<HTMLElement>): void => {
     if (this._editingFloatingPicker.value &&
       (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1)
     ) {
@@ -109,8 +102,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
     }
   }
 
-  @autobind
-  private _onInputChange(ev: React.FormEvent<HTMLElement>): void {
+  private _onInputChange = (ev: React.FormEvent<HTMLElement>): void => {
     let value: string = (ev.target as HTMLInputElement).value;
 
     if (value === '') {
@@ -128,8 +120,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
     }
   }
 
-  @autobind
-  private _onSuggestionSelected(item: IExtendedPersonaProps): void {
+  private _onSuggestionSelected = (item: IExtendedPersonaProps): void => {
     this.props.onEditingComplete(this.props.item, item);
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
index 5abc76f2f865a7..76d64899af892a 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
@@ -1,7 +1,7 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
-import { BaseComponent, autobind, createRef, RefObject } from '../../../../Utilities';
+import { BaseComponent, createRef, RefObject } from '../../../../Utilities';
 import { IExtendedPersonaProps } from '../SelectedPeopleList';
 import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
@@ -46,8 +46,7 @@ export class SelectedItemWithContextMenu extends BaseComponent<ISelectedItemWith
       </div >);
   }
 
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLElement>): void {
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
     ev.preventDefault();
     if (this.props.beginEditing && !this.props.item.isValid) {
       this.props.beginEditing(this.props.item);
@@ -56,8 +55,7 @@ export class SelectedItemWithContextMenu extends BaseComponent<ISelectedItemWith
     }
   }
 
-  @autobind
-  private _onCloseContextualMenu(ev: Event): void {
+  private _onCloseContextualMenu = (ev: Event): void => {
     this.setState({ contextualMenuVisible: false });
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
index 3c854dbad16b33..c667611f15cc22 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
@@ -6,7 +6,7 @@ import { IBaseSelectedItemsListProps, ISelectedItemProps } from '../BaseSelected
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem';
 import { SelectedItemWithContextMenu } from './Items/SelectedItemWithContextMenu';
-import { autobind, IRenderFunction } from '../../../Utilities';
+import { IRenderFunction } from '../../../Utilities';
 import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { IBaseFloatingPickerProps } from '../../../FloatingPicker';
 import { EditingItem } from './Items/EditingItem';
@@ -45,11 +45,10 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
 
   // tslint:disable-next-line:no-any
   public static defaultProps: any = {
-    onRenderItem: (props: ISelectedPeopleItemProps) => <ExtendedSelectedItem {...props} />,
+    onRenderItem: (props: ISelectedPeopleItemProps) => <ExtendedSelectedItem { ...props } />,
   };
 
-  @autobind
-  public replaceItem(itemToReplace: IExtendedPersonaProps, itemsToReplaceWith: IExtendedPersonaProps[]): void {
+  public replaceItem = (itemToReplace: IExtendedPersonaProps, itemsToReplaceWith: IExtendedPersonaProps[]): void => {
     let { items } = this.state;
     let index: number = items.indexOf(itemToReplace);
     if (index > -1) {
@@ -58,8 +57,7 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
     }
   }
 
-  @autobind
-  protected renderItems(): JSX.Element[] {
+  protected renderItems = (): JSX.Element[] => {
     let { items } = this.state;
     // tslint:disable-next-line:no-any
     return items.map((item: any, index: number) => this._renderItem(item, index));
@@ -84,7 +82,7 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
     if ((item as IExtendedPersonaProps).isEditing) {
       return (
         <EditingItem
-          {...props}
+          { ...props }
           onRenderFloatingPicker={ this.props.onRenderFloatingPicker }
           floatingPickerProps={ this.props.floatingPickerProps }
           onEditingComplete={ this._completeEditing }
@@ -109,15 +107,13 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
     }
   }
 
-  @autobind
-  private _beginEditing(item: IExtendedPersonaProps): void {
+  private _beginEditing = (item: IExtendedPersonaProps): void => {
     item.isEditing = true;
     this.forceUpdate();
   }
 
-  @autobind
   // tslint:disable-next-line:no-any
-  private _completeEditing(oldItem: any, newItem: any): void {
+  private _completeEditing = (oldItem: any, newItem: any): void => {
     oldItem.isEditing = false;
     this.replaceItem(oldItem, newItem);
   }
diff --git a/packages/experiments/src/components/Tile/Tile.tsx b/packages/experiments/src/components/Tile/Tile.tsx
index 7ec440385048b8..1a18e013a8ed87 100644
--- a/packages/experiments/src/components/Tile/Tile.tsx
+++ b/packages/experiments/src/components/Tile/Tile.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ITileProps, TileSize } from './Tile.types';
 import { Check } from 'office-ui-fabric-react/lib/Check';
 import { SELECTION_CHANGE } from 'office-ui-fabric-react/lib/Selection';
-import { ISize, css, BaseComponent, autobind, getId } from '../../Utilities';
+import { ISize, css, BaseComponent, getId } from '../../Utilities';
 import * as TileStylesModule from './Tile.scss';
 import * as SignalStylesModule from '../signals/Signal.scss';
 import * as CheckStylesModule from 'office-ui-fabric-react/lib/components/Check/Check.scss';
@@ -360,8 +360,7 @@ export class Tile extends BaseComponent<ITileProps, ITileState> {
     );
   }
 
-  @autobind
-  private _onSelectionChange(): void {
+  private _onSelectionChange = (): void => {
     const {
       selection,
       selectionIndex = -1
diff --git a/packages/experiments/src/components/TilesList/TilesList.tsx b/packages/experiments/src/components/TilesList/TilesList.tsx
index 13dfac23629ef3..2903d2adf8b1be 100644
--- a/packages/experiments/src/components/TilesList/TilesList.tsx
+++ b/packages/experiments/src/components/TilesList/TilesList.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ITilesListProps, ITilesGridItem, ITilesGridSegment, TilesGridMode, ITileSize } from './TilesList.types';
 import { List, IPageProps } from 'office-ui-fabric-react/lib/List';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
-import { autobind, css, IRenderFunction, IRectangle } from 'office-ui-fabric-react/lib/Utilities';
+import { css, IRenderFunction, IRectangle } from 'office-ui-fabric-react/lib/Utilities';
 import * as TilesListStylesModule from './TilesList.scss';
 
 // tslint:disable-next-line:no-any
@@ -167,8 +167,7 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
     );
   }
 
-  @autobind
-  private _onRenderPage(pageProps: IPageProps, defaultRender?: IRenderFunction<IPageProps>): JSX.Element {
+  private _onRenderPage = (pageProps: IPageProps, defaultRender?: IRenderFunction<IPageProps>): JSX.Element => {
     const {
       page,
       className: pageClassName,
@@ -288,11 +287,10 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
     );
   }
 
-  @autobind
-  private _getPageSpecification(startIndex: number, bounds: IRectangle): {
+  private _getPageSpecification = (startIndex: number, bounds: IRectangle): {
     itemCount: number;
     data: IPageData<TItem>;
-  } {
+  } => {
     if (this._pageSpecificationCache) {
       if (this._pageSpecificationCache.width !== bounds.width) {
         this._pageSpecificationCache = undefined;
@@ -428,22 +426,19 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
     return pageSpecification;
   }
 
-  @autobind
-  private _onGetCellClassName(): string {
+  private _onGetCellClassName = (): string => {
     return TilesListStyles.listCell;
   }
 
-  @autobind
-  private _onGetPageClassName(): string {
+  private _onGetPageClassName = (): string => {
     return TilesListStyles.listPage;
   }
 
-  @autobind
-  private _onGetCellStyle(item: ITileCell<TItem>, currentRow?: IRowData): React.CSSProperties {
+  private _onGetCellStyle = (item: ITileCell<TItem>, currentRow?: IRowData): React.CSSProperties => {
     const {
       grid: {
         mode: gridMode,
-      maxScaleFactor
+        maxScaleFactor
       },
       grid
     } = item;
diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
index 75d6c43b682434..15817e321616cc 100644
--- a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
+++ b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IVirtualizedListProps } from './VirtualizedList.types';
 import { IScrollContainerContext, ScrollContainerContextTypes } from '../../utilities/scrolling/ScrollContainer';
 import { IObjectWithKey } from 'office-ui-fabric-react/lib/Selection';
-import { BaseComponent, getParent, css, autobind, createRef } from 'office-ui-fabric-react/lib/Utilities';
+import { BaseComponent, getParent, css, createRef } from 'office-ui-fabric-react/lib/Utilities';
 
 interface IRange {
   /** Start of range */
@@ -193,8 +193,7 @@ export class VirtualizedList<TItem extends IObjectWithKey> extends BaseComponent
     return <ItemTag ref={ this._spacerRef.bind(this, key) } key={ key } style={ { height: spacerHeight } } />;
   }
 
-  @autobind
-  private _spacerRef(key: string, ref: HTMLElement): void {
+  private _spacerRef = (key: string, ref: HTMLElement): void => {
     if (ref) {
       this._spacerElements[key] = ref;
     } else {
diff --git a/packages/experiments/src/utilities/scrolling/ScrollContainer.tsx b/packages/experiments/src/utilities/scrolling/ScrollContainer.tsx
index 7f780b625f21f6..362a5e167b6298 100644
--- a/packages/experiments/src/utilities/scrolling/ScrollContainer.tsx
+++ b/packages/experiments/src/utilities/scrolling/ScrollContainer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { IScrollContainerProps } from './ScrollContainer.types';
-import { BaseComponent, autobind, css } from 'office-ui-fabric-react/lib/Utilities';
+import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
 
 import * as ScrollContainerStyles from './ScrollContainer.scss';
 
@@ -79,16 +79,14 @@ export class ScrollContainer extends BaseComponent<IScrollContainerProps> implem
     }
   }
 
-  @autobind
-  private _resolveRoot(element: HTMLDivElement): void {
+  private _resolveRoot = (element: HTMLDivElement): void => {
     if (element) {
       this._root = element;
       this._init();
     }
   }
 
-  @autobind
-  private _onIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
+  private _onIntersection = (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void => {
     for (const entry of entries) {
       // tslint:disable-next-line:no-any
       if ((entry as any).isIntersecting || entry.intersectionRatio > 0) {
@@ -142,8 +140,7 @@ export class ScrollContainer extends BaseComponent<IScrollContainerProps> implem
     }
   }
 
-  @autobind
-  private _onScroll(): void {
+  private _onScroll = (): void => {
     const scrollTop = this._root.scrollTop;
 
     for (const callback of this._callbacks) {
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
index 887f243b75f544..70259d77f39ecb 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 /* tslint:enable */
 
-import { autobind, BaseComponent } from '../../Utilities';
+import { BaseComponent } from '../../Utilities';
 import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types';
 import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames';
 import { getStyles } from './ActivityItem.styles';
@@ -52,8 +52,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
     );
   }
 
-  @autobind
-  private _onRenderIcon(props: IActivityItemProps): JSX.Element | React.ReactNode | null {
+  private _onRenderIcon = (props: IActivityItemProps): JSX.Element | React.ReactNode | null => {
     if (props.activityPersonas) {
       return this._onRenderPersonaArray(props);
     } else {
@@ -61,8 +60,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
     }
   }
 
-  @autobind
-  private _onRenderActivityDescription(props: IActivityItemProps): JSX.Element | null {
+  private _onRenderActivityDescription = (props: IActivityItemProps): JSX.Element | null => {
     const activityDescription = props.activityDescription || props.activityDescriptionText;
 
     if (activityDescription) {
@@ -72,8 +70,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
     return null;
   }
 
-  @autobind
-  private _onRenderComments(props: IActivityItemProps): JSX.Element | null {
+  private _onRenderComments = (props: IActivityItemProps): JSX.Element | null => {
     const comments = props.comments || props.commentText;
 
     if (!props.isCompact && comments) {
@@ -83,8 +80,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
     return null;
   }
 
-  @autobind
-  private _onRenderTimeStamp(props: IActivityItemProps): JSX.Element | null {
+  private _onRenderTimeStamp = (props: IActivityItemProps): JSX.Element | null => {
     if (!props.isCompact && props.timeStamp) {
       return (<div className={ this._classNames.timeStamp }>{ props.timeStamp }</div>);
     }
@@ -93,8 +89,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   }
 
   // If activityPersonas is an array of persona props, build the persona cluster element.
-  @autobind
-  private _onRenderPersonaArray(props: IActivityItemProps): JSX.Element | null {
+  private _onRenderPersonaArray = (props: IActivityItemProps): JSX.Element | null => {
     let personaElement: JSX.Element | null = null;
     const activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
     if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
index 4e98a6cf270eee..d5386e0f0005aa 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -3,7 +3,6 @@ import { IAutofillProps, IAutofill } from './Autofill.types';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   getNativeProps,
   inputProperties,
   createRef
@@ -146,31 +145,27 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
   // Composition events are used when the character/text requires several keystrokes to be completed.
   // Some examples of this are mobile text input and langauges like Japanese or Arabic.
   // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
-  @autobind
-  private _onCompositionStart(ev: React.CompositionEvent<HTMLInputElement>) {
+  private _onCompositionStart = (ev: React.CompositionEvent<HTMLInputElement>) => {
     this._autoFillEnabled = false;
   }
 
   // Composition events are used when the character/text requires several keystrokes to be completed.
   // Some examples of this are mobile text input and langauges like Japanese or Arabic.
   // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
-  @autobind
-  private _onCompositionEnd(ev: React.CompositionEvent<HTMLInputElement>) {
+  private _onCompositionEnd = (ev: React.CompositionEvent<HTMLInputElement>) => {
     const inputValue = this._getCurrentInputValue();
     this._tryEnableAutofill(inputValue, this.value, false, true);
     // Due to timing, this needs to be async, otherwise no text will be selected.
     this._async.setTimeout(() => this._updateValue(inputValue), 0);
   }
 
-  @autobind
-  private _onClick() {
+  private _onClick = () => {
     if (this._value && this._value !== '' && this._autoFillEnabled) {
       this._autoFillEnabled = false;
     }
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLInputElement>) {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
     }
@@ -200,8 +195,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     }
   }
 
-  @autobind
-  private _onInputChanged(ev: React.FormEvent<HTMLElement>) {
+  private _onInputChanged = (ev: React.FormEvent<HTMLElement>) => {
     const value: string = this._getCurrentInputValue(ev);
 
     // Right now typing does not have isComposing, once that has been fixed any should be removed.
@@ -209,8 +203,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     this._updateValue(value);
   }
 
-  @autobind
-  private _onChanged(): void {
+  private _onChanged = (): void => {
     // Swallow this event, we don't care about it
     // We must provide it because React PropTypes marks it as required, but onInput serves the correct purpose
     return;
@@ -258,8 +251,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
    * Updates the current input value as well as getting a new display value.
    * @param newValue The new value from the input
    */
-  @autobind
-  private _updateValue(newValue: string) {
+  private _updateValue = (newValue: string) => {
     this._value = this.props.onInputChange ? this.props.onInputChange(newValue) : newValue;
     this.setState({
       displayValue: this._getDisplayValue(this._value, this.props.suggestedDisplayValue)
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
index 5e24eca4a8a322..7d036ce63f6e5c 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   css,
   getRTL
 } from '../../Utilities';
@@ -53,8 +52,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     );
   }
 
-  @autobind
-  private _onReduceData(data: IBreadCrumbData): IBreadCrumbData | undefined {
+  private _onReduceData = (data: IBreadCrumbData): IBreadCrumbData | undefined => {
     let { renderedItems, renderedOverflowItems } = data;
     const movedItem = renderedItems[0];
     renderedItems = renderedItems.slice(1);
@@ -66,8 +64,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     }
   }
 
-  @autobind
-  private _onRenderBreadcrumb(data: IBreadCrumbData) {
+  private _onRenderBreadcrumb = (data: IBreadCrumbData) => {
     const { className, ariaLabel, onRenderItem = this._onRenderItem, overflowAriaLabel } = data.props;
     const { renderedOverflowItems, renderedItems } = data;
 
@@ -124,8 +121,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     );
   }
 
-  @autobind
-  private _onRenderItem(item: IBreadcrumbItem) {
+  private _onRenderItem = (item: IBreadcrumbItem) => {
     if (item.onClick || item.href) {
       return (
         <Link
@@ -156,8 +152,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     }
   }
 
-  @autobind
-  private _onBreadcrumbClicked(item: IBreadcrumbItem, ev: React.MouseEvent<HTMLElement>) {
+  private _onBreadcrumbClicked = (item: IBreadcrumbItem, ev: React.MouseEvent<HTMLElement>) => {
     if (item.onClick) {
       item.onClick(ev, item);
     }
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
index e60db6597e6610..6d999bf54e92f6 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -5,7 +5,6 @@ import { CalendarDay, ICalendarDay } from './CalendarDay';
 import { CalendarMonth, ICalendarMonth } from './CalendarMonth';
 import { compareDates, getDateRangeArray } from '../../utilities/dateMath/DateMath';
 import {
-  autobind,
   css,
   BaseComponent,
   KeyCodes,
@@ -210,16 +209,13 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
   }
 
-  @autobind
-  private _navigateDay(date: Date) {
+  private _navigateDay = (date: Date): void => {
     this.setState({
       navigatedDate: date
     });
   }
 
-  @autobind
-  private _onNavigateDate(date: Date, focusOnNavigatedDay: boolean) {
-
+  private _onNavigateDate = (date: Date, focusOnNavigatedDay: boolean): void => {
     if (this.props.isDayPickerVisible || (!this.props.isDayPickerVisible && !focusOnNavigatedDay)) {
       this._navigateDay(date);
       this._focusOnUpdate = focusOnNavigatedDay;
@@ -229,8 +225,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
   }
 
-  @autobind
-  private _onSelectDate(date: Date, selectedDateRangeArray?: Date[]) {
+  private _onSelectDate = (date: Date, selectedDateRangeArray?: Date[]): void => {
     const { onSelectDate } = this.props;
 
     this.setState({
@@ -242,8 +237,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
   }
 
-  @autobind
-  private _onHeaderSelect(focus: boolean) {
+  private _onHeaderSelect = (focus: boolean): void => {
     this.setState({
       isDayPickerVisible: !this.state.isDayPickerVisible,
       isMonthPickerVisible: !this.state.isMonthPickerVisible
@@ -254,19 +248,15 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
   }
 
-  @autobind
-  private _onGotoToday() {
-
+  private _onGotoToday = (): void => {
     const { dateRangeType, firstDayOfWeek, today, workWeekDays } = this.props;
 
     const dates = getDateRangeArray(today!, dateRangeType!, firstDayOfWeek!, workWeekDays!);
 
     this._onSelectDate(today!, dates);
-
   }
 
-  @autobind
-  private _onGotoTodayKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onGotoTodayKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
       ev.preventDefault();
       this._onGotoToday();
@@ -279,8 +269,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
   }
 
-  @autobind
-  private _onDatePickerPopupKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onDatePickerPopupKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     switch (ev.which) {
       case KeyCodes.enter:
         ev.preventDefault();
@@ -299,8 +288,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     }
   }
 
-  @autobind
-  private _handleEscKey(ev: React.KeyboardEvent<HTMLElement>) {
+  private _handleEscKey = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (this.props.onDismiss) {
       this.props.onDismiss();
     }
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
index 728cb130cc7d89..7907ad60de58e5 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css,
   getId,
   getRTL,
@@ -403,23 +402,20 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     }
   }
 
-  @autobind
-  private _onKeyDown(callback: () => void, ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDown = (callback: () => void, ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
       callback();
     }
   }
 
-  @autobind
-  private _onDayKeyDown(originalDate: Date, weekIndex: number, dayIndex: number)
-    : (ev: React.KeyboardEvent<HTMLElement>) => void {
+  private _onDayKeyDown = (originalDate: Date, weekIndex: number, dayIndex: number)
+    : (ev: React.KeyboardEvent<HTMLElement>) => void => {
     return (ev: React.KeyboardEvent<HTMLElement>): void => {
       this._navigateMonthEdge(ev, originalDate, weekIndex, dayIndex);
     };
   }
 
-  @autobind
-  private _onSelectDate(selectedDate: Date) {
+  private _onSelectDate = (selectedDate: Date): void => {
     const {
       onSelectDate,
       dateRangeType,
@@ -451,39 +447,33 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     }
   }
 
-  @autobind
-  private _onSelectNextMonth() {
+  private _onSelectNextMonth = (): void => {
     this.props.onNavigateDate(addMonths(this.props.navigatedDate, 1), false);
   }
 
-  @autobind
-  private _onSelectPrevMonth() {
+  private _onSelectPrevMonth = (): void => {
     this.props.onNavigateDate(addMonths(this.props.navigatedDate, -1), false);
   }
 
-  @autobind
-  private _onHeaderSelect() {
+  private _onHeaderSelect = (): void => {
     const { onHeaderSelect } = this.props;
     if (onHeaderSelect) {
       onHeaderSelect(true);
     }
   }
 
-  @autobind
-  private _onHeaderKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onHeaderKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     const { onHeaderSelect } = this.props;
     if (onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {
       onHeaderSelect(true);
     }
   }
 
-  @autobind
-  private _onPrevMonthKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onPrevMonthKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     this._onKeyDown(this._onSelectPrevMonth, ev);
   }
 
-  @autobind
-  private _onNextMonthKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onNextMonthKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     this._onKeyDown(this._onSelectNextMonth, ev);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
index 44e48726bd9846..c8058f76f7898c 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -4,7 +4,6 @@ import {
   KeyCodes,
   css,
   getRTL,
-  autobind
 } from '../../Utilities';
 import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types';
 import { FocusZone } from '../../FocusZone';
@@ -162,37 +161,31 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
     return today.getFullYear() === year && today.getMonth() === month;
   }
 
-  @autobind
-  private _onKeyDown(callback: () => void, ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDown = (callback: () => void, ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
       callback();
     }
   }
 
-  @autobind
-  private _onSelectNextYear() {
+  private _onSelectNextYear = (): void => {
     const { navigatedDate, onNavigateDate } = this.props;
     onNavigateDate(addYears(navigatedDate, 1), false);
   }
 
-  @autobind
-  private _onSelectNextYearKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onSelectNextYearKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     this._onKeyDown(this._onSelectNextYear, ev);
   }
 
-  @autobind
-  private _onSelectPrevYear() {
+  private _onSelectPrevYear = (): void => {
     const { navigatedDate, onNavigateDate } = this.props;
     onNavigateDate(addYears(navigatedDate, -1), false);
   }
 
-  @autobind
-  private _onSelectPrevYearKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onSelectPrevYearKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     this._onKeyDown(this._onSelectPrevYear, ev);
   }
 
-  @autobind
-  private _onSelectMonth(newMonth: number) {
+  private _onSelectMonth = (newMonth: number): void => {
     const { navigatedDate, onNavigateDate, onHeaderSelect } = this.props;
 
     // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked
@@ -202,16 +195,14 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
     onNavigateDate(setMonth(navigatedDate, newMonth), true);
   }
 
-  @autobind
-  private _onHeaderSelect() {
+  private _onHeaderSelect = (): void => {
     const { onHeaderSelect } = this.props;
     if (onHeaderSelect) {
       onHeaderSelect(true);
     }
   }
 
-  @autobind
-  private _onHeaderKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onHeaderKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     const { onHeaderSelect } = this.props;
     if (onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {
       onHeaderSelect(true);
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index 1277b102253bf1..b69501b1a3bbe9 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -12,7 +12,6 @@ import {
   IPoint,
   IRectangle,
   assign,
-  autobind,
   elementContains,
   focusFirstChild,
   getWindow,
@@ -216,8 +215,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     return content;
   }
 
-  @autobind
-  public dismiss(ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
+  public dismiss = (ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void => {
     const { onDismiss } = this.props;
 
     if (onDismiss) {
@@ -246,16 +244,14 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     }
   }
 
-  @autobind
-  protected _setInitialFocus() {
+  protected _setInitialFocus = (): void => {
     if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.value) {
       this._didSetInitialFocus = true;
       focusFirstChild(this._calloutElement.value);
     }
   }
 
-  @autobind
-  protected _onComponentDidMount() {
+  protected _onComponentDidMount = (): void => {
     // This is added so the callout will dismiss when the window is scrolled
     // but not when something inside the callout is scrolled. The delay seems
     // to be required to avoid React firing an async focus event in IE from
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
index f466a7a4b06687..30d0fdcea818c0 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   getId,
   createRef,
   customizable
@@ -137,8 +136,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     }
   }
 
-  @autobind
-  private _onFocus(ev: React.FocusEvent<HTMLInputElement>): void {
+  private _onFocus = (ev: React.FocusEvent<HTMLInputElement>): void => {
     const { inputProps } = this.props;
 
     if (inputProps && inputProps.onFocus) {
@@ -146,8 +144,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     }
   }
 
-  @autobind
-  private _onBlur(ev: React.FocusEvent<HTMLInputElement>): void {
+  private _onBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
     const { inputProps } = this.props;
 
     if (inputProps && inputProps.onBlur) {
@@ -155,8 +152,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     }
   }
 
-  @autobind
-  private _onClick(ev: React.FormEvent<HTMLButtonElement>) {
+  private _onClick = (ev: React.FormEvent<HTMLButtonElement>): void => {
     const { disabled, onChange } = this.props;
     const { isChecked } = this.state;
     ev.preventDefault();
@@ -173,8 +169,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     }
   }
 
-  @autobind
-  private _onRenderLabel(props: ICheckboxProps) {
+  private _onRenderLabel = (props: ICheckboxProps): JSX.Element | null => {
     const { label } = props;
 
     return label ? (
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
index 651275a1eaefb0..5af5a82d6b56c3 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
@@ -1,6 +1,6 @@
 // Utilities
 import * as React from 'react';
-import { BaseComponent, classNamesFunction, autobind, createRef } from '../../Utilities';
+import { BaseComponent, classNamesFunction, createRef } from '../../Utilities';
 import { DefaultPalette } from '../../Styling';
 
 // Component Dependencies
@@ -205,13 +205,11 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
     }));
   }
 
-  @autobind
-  private _onFocusHandler(): void {
+  private _onFocusHandler = (): void => {
     this._openCoachmark();
   }
 
-  @autobind
-  private _openCoachmark(): void {
+  private _openCoachmark = (): void => {
     this.setState({
       collapsed: false
     });
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
index cbdb092e02ba75..37ca7b4635482c 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
@@ -12,7 +12,6 @@ import {
   IPoint,
   IRectangle,
   assign,
-  autobind,
   css,
   elementContains,
   focusFirstChild,
@@ -198,8 +197,7 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
     );
   }
 
-  @autobind
-  public dismiss(ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void {
+  public dismiss = (ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void => {
     const { onDismiss } = this.props;
 
     if (onDismiss) {
@@ -228,16 +226,14 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
     }
   }
 
-  @autobind
-  protected _setInitialFocus(): void {
+  protected _setInitialFocus = (): void => {
     if (this._contentHost.value && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
       this._didSetInitialFocus = true;
       focusFirstChild(this._contentHost.value);
     }
   }
 
-  @autobind
-  protected _onComponentDidMount(): void {
+  protected _onComponentDidMount = (): void => {
     // This is added so the positioningContainer will dismiss when the window is scrolled
     // but not when something inside the positioningContainer is scrolled. The delay seems
     // to be required to avoid React firing an async focus event in IE from
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
index f0d3a4b871ee59..291607e1e8e5b8 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import { IColorPickerProps } from './ColorPicker.types';
@@ -146,28 +145,23 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
     );
   }
 
-  @autobind
-  private _onSVChanged(s: number, v: number) {
+  private _onSVChanged = (s: number, v: number): void => {
     this._updateColor(updateSV(this.state.color, s, v));
   }
 
-  @autobind
-  private _onHChanged(h: number) {
+  private _onHChanged = (h: number): void => {
     this._updateColor(updateH(this.state.color, h));
   }
 
-  @autobind
-  private _onAChanged(a: number) {
+  private _onAChanged = (a: number): void => {
     this._updateColor(updateA(this.state.color, a));
   }
 
-  @autobind
-  private _onHexChanged() {
+  private _onHexChanged = (): void => {
     this._updateColor(getColorFromString('#' + this.hexText.value));
   }
 
-  @autobind
-  private _onRGBAChanged() {
+  private _onRGBAChanged = (): void => {
     this._updateColor(getColorFromRGBA({
       r: Number(this.rText.value),
       g: Number(this.gText.value),
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
index 89faa3b7c9e17a..2a40276926f1b3 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   assign,
-  autobind,
   css,
   createRef
 } from '../../Utilities';
@@ -77,16 +76,14 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
     );
   }
 
-  @autobind
-  private _onMouseDown(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseDown = (ev: React.MouseEvent<HTMLElement>): void => {
     this._events.on(window, 'mousemove', this._onMouseMove, true);
     this._events.on(window, 'mouseup', this._onMouseUp, true);
 
     this._onMouseMove(ev);
   }
 
-  @autobind
-  private _onMouseMove(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
     const { color, onSVChanged } = this.props;
 
     if (!this._root.value) {
@@ -118,8 +115,7 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
     ev.stopPropagation();
   }
 
-  @autobind
-  private _onMouseUp(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseUp = (ev: React.MouseEvent<HTMLElement>): void => {
     this._events.off();
 
     this.setState({
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
index 5c74c41296b04f..73b4ca591adc53 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   css,
   createRef
 } from '../../Utilities';
@@ -78,16 +77,14 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
     );
   }
 
-  @autobind
-  private _onMouseDown(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseDown = (ev: React.MouseEvent<HTMLElement>): void => {
     this._events.on(window, 'mousemove', this._onMouseMove, true);
     this._events.on(window, 'mouseup', this._onMouseUp, true);
 
     this._onMouseMove(ev);
   }
 
-  @autobind
-  private _onMouseMove(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
     if (!this._root.value) {
       return;
     }
@@ -111,8 +108,7 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
     ev.stopPropagation();
   }
 
-  @autobind
-  private _onMouseUp(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseUp = (ev: React.MouseEvent<HTMLElement>): void => {
     this._events.off();
 
     this.setState({
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
index eeb67596e1afc4..94db32efdd8bf0 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -9,7 +9,6 @@ import {
 } from '../../Button';
 import { Autofill } from '../Autofill/Autofill';
 import {
-  autobind,
   BaseComponent,
   divProperties,
   findIndex,
@@ -266,7 +265,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       onRenderContainer = this._onRenderContainer,
       onRenderList = this._onRenderList,
       onRenderItem = this._onRenderItem,
-      onRenderOption = this._onRenderOption,
+      onRenderOption = this._onRenderOptionContent,
       allowFreeform,
       buttonIconProps,
       isButtonAriaHidden = true,
@@ -381,8 +380,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Set focus on the input
    */
-  @autobind
-  public focus(shouldOpenOnFocus?: boolean) {
+  public focus = (shouldOpenOnFocus?: boolean): void => {
     if (this._comboBox) {
       this._comboBox.focus();
       if (shouldOpenOnFocus) {
@@ -396,8 +394,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Close menu callout if it is open
    */
-  @autobind
-  public dismissMenu(): void {
+  public dismissMenu = (): void => {
     const { isOpen } = this.state;
     isOpen && this.setState({ isOpen: false });
   }
@@ -409,8 +406,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    *  in to the auto fill's componentWillReceiveProps
    * @returns {string} - the updated value to set, if needed
    */
-  @autobind
-  private _onUpdateValueInAutofillWillReceiveProps(): string | null {
+  private _onUpdateValueInAutofillWillReceiveProps = (): string | null => {
     if (this._comboBox === null || this._comboBox === undefined) {
       return null;
     }
@@ -430,8 +426,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @returns {boolean} - should the full value of the input be selected?
    * True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise
    */
-  @autobind
-  private _onShouldSelectFullInputValueInAutofillComponentDidUpdate(): boolean {
+  private _onShouldSelectFullInputValueInAutofillComponentDidUpdate = (): boolean => {
     return this._currentVisibleValue === this.state.suggestedDisplayValue;
   }
 
@@ -440,8 +435,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * to show to the user based off of the current props and state
    * @returns {string} the value to pass to the input
    */
-  @autobind
-  private _getVisibleValue(): string | undefined {
+  private _getVisibleValue = (): string | undefined => {
     const {
       value,
       allowFreeform,
@@ -518,8 +512,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Handler for typing changes on the input
    * @param updatedValue - the newly changed value
    */
-  @autobind
-  private _onInputChange(updatedValue: string) {
+  private _onInputChange = (updatedValue: string): void => {
     if (this.props.disabled) {
       this._handleInputWhenDisabled(null /* event */);
       return;
@@ -734,8 +727,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Focus (and select) the content of the input
    * and set the focused state
    */
-  @autobind
-  private _select() {
+  private _select = (): void => {
     if (this._comboBox.inputElement) {
       this._comboBox.inputElement.select();
     }
@@ -750,8 +742,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * if they need to be passed in the first time. This only does work if an onResolveOptions
    * callback was passed in
    */
-  @autobind
-  private _onResolveOptions() {
+  private _onResolveOptions = (): void => {
     if (this.props.onResolveOptions) {
 
       // get the options
@@ -783,8 +774,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * OnBlur handler. Set the focused state to false
    * and submit any pending value
    */
-  @autobind
-  private _onBlur(event: React.FocusEvent<HTMLInputElement>) {
+  private _onBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
 
     // Do nothing if the blur is coming from something
     // inside the comboBox root or the comboBox menu since
@@ -869,8 +859,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   // Render Callout container and pass in list
-  @autobind
-  private _onRenderContainer(props: IComboBoxProps): JSX.Element {
+  private _onRenderContainer = (props: IComboBoxProps): JSX.Element => {
     const {
       onRenderList,
       calloutProps,
@@ -906,8 +895,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   // Render List of items
-  @autobind
-  private _onRenderList(props: IComboBoxProps): JSX.Element {
+  private _onRenderList = (props: IComboBoxProps): JSX.Element => {
     const {
       onRenderItem,
       options
@@ -927,8 +915,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   // Render items
-  @autobind
-  private _onRenderItem(item: IComboBoxOption): JSX.Element | null {
+  private _onRenderItem = (item: IComboBoxOption): JSX.Element | null => {
     switch (item.itemType) {
       case SelectableOptionMenuItemType.Divider:
         return this._renderSeparator(item);
@@ -940,8 +927,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   // Default _onRenderLowerContent function returns nothing
-  @autobind
-  private _onRenderLowerContent(): null {
+  private _onRenderLowerContent = (): null => {
     return null;
   }
 
@@ -962,18 +948,16 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   private _renderHeader(item: IComboBoxOption): JSX.Element {
-    const { onRenderOption = this._onRenderOption } = this.props;
+    const { onRenderOption = this._onRenderOptionContent } = this.props;
 
     return (
       <div key={ item.key } className={ this._classNames.header } role='heading'>
-        { onRenderOption(item, this._onRenderOption) }
+        { onRenderOption(item, this._onRenderOptionContent) }
       </div>);
   }
 
-  // Render menu item
-  @autobind
-  private _renderOption(item: IComboBoxOption): JSX.Element {
-    const { onRenderOption = this._onRenderOption } = this.props;
+  private _renderOption = (item: IComboBoxOption): JSX.Element => {
+    const { onRenderOption = this._onRenderOptionContent } = this.props;
     const id = this._id;
     const isSelected: boolean = this._isOptionSelected(item.index);
     const rootClassNames = getComboBoxOptionClassNames(this._getCurrentOptionStyles(item)).root;
@@ -995,7 +979,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         ariaLabel={ item.text }
         disabled={ item.disabled }
       > { <span ref={ this._resolveRef(isSelected ? '_selectedElement' : '') }>
-        { onRenderOption(item, this._onRenderOption) }
+        { onRenderOption(item, this._onRenderOptionContent) }
       </span>
         }
       </CommandButton>
@@ -1054,8 +1038,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Scroll handler for the callout to make sure the mouse events
    * for updating focus are not interacting during scroll
    */
-  @autobind
-  private _onScroll() {
+  private _onScroll = () => {
     if (!this._isScrollIdle && this._scrollIdleTimeoutId !== undefined) {
       this._async.clearTimeout(this._scrollIdleTimeoutId);
       this._scrollIdleTimeoutId = undefined;
@@ -1112,9 +1095,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     }
   }
 
-  // Render content of item
-  @autobind
-  private _onRenderOption(item: IComboBoxOption): JSX.Element {
+  private _onRenderOptionContent = (item: IComboBoxOption): JSX.Element => {
     const optionClassNames = getComboBoxOptionClassNames(this._getCurrentOptionStyles(item));
     return <span className={ optionClassNames.optionText }>{ item.text }</span>;
   }
@@ -1136,8 +1117,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Handles dismissing (cancelling) the menu
    */
-  @autobind
-  private _onDismiss() {
+  private _onDismiss = (): void => {
 
     // reset the selected index
     // to the last valud state
@@ -1294,8 +1274,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Handle keydown on the input
    * @param ev - The keyboard event that was fired
    */
-  @autobind
-  private _onInputKeyDown(ev: React.KeyboardEvent<HTMLElement | Autofill>) {
+  private _onInputKeyDown = (ev: React.KeyboardEvent<HTMLElement | Autofill>): void => {
     const {
       disabled,
       allowFreeform,
@@ -1456,8 +1435,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Handle keyup on the input
    * @param ev - the keyboard event that was fired
    */
-  @autobind
-  private _onInputKeyUp(ev: React.KeyboardEvent<HTMLElement | Autofill>) {
+  private _onInputKeyUp = (ev: React.KeyboardEvent<HTMLElement | Autofill>): void => {
     const {
       disabled,
       allowFreeform,
@@ -1549,8 +1527,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * and the input when not allowing freeform. This
    * toggles the expand/collapse state of the comboBox (if enbled)
    */
-  @autobind
-  private _onComboBoxClick() {
+  private _onComboBoxClick = (): void => {
     const { disabled } = this.props;
     const { isOpen } = this.state;
 
@@ -1562,8 +1539,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Click handler for the autofill.
    */
-  @autobind
-  private _onAutofillClick() {
+  private _onAutofillClick = (): void => {
     if (this.props.allowFreeform) {
       this.focus(this.state.isOpen);
     } else {
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
index 210f51d51d1dba..0674d552c7261a 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { autobind, BaseComponent, createRef } from '../../Utilities';
+import { BaseComponent, createRef } from '../../Utilities';
 import { ComboBox } from './ComboBox';
 import { IComboBoxProps, IComboBox } from './ComboBox.types';
 import { List } from '../../List';
@@ -37,8 +37,7 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
     );
   }
 
-  @autobind
-  protected _onRenderList(props: IComboBoxProps): JSX.Element {
+  protected _onRenderList = (props: IComboBoxProps): JSX.Element => {
     const {
       onRenderItem
     } = props;
@@ -54,8 +53,7 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
     );
   }
 
-  @autobind
-  protected _onScrollToItem(itemIndex: number): void {
+  protected _onScrollToItem = (itemIndex: number): void => {
     // We are using the List component, call scrollToIndex
     this._list.value && this._list.value.scrollToIndex(itemIndex);
   }
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
index c33eb4feb7c31e..2a4996e855bcdc 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   buttonProperties,
   anchorProperties,
   css,
@@ -415,8 +414,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     };
   }
 
-  @autobind
-  private _onOverflowClick(ev: React.MouseEvent<HTMLButtonElement>) {
+  private _onOverflowClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
     if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
       this._onContextMenuDismiss();
     } else {
@@ -429,8 +427,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     }
   }
 
-  @autobind
-  private _onContextMenuDismiss(ev?: any) {
+  private _onContextMenuDismiss = (ev?: any) => {
     const { value: commandSurface } = this._commandSurface;
 
     if (!ev || !ev.relatedTarget || commandSurface && !commandSurface.contains(ev.relatedTarget as HTMLElement)) {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 855c6e3f44f971..49009fea857bed 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -18,7 +18,6 @@ import {
   assign,
   getId,
   getRTL,
-  autobind,
   KeyCodes,
   getDocument,
   getWindow,
@@ -115,8 +114,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     this._isScrollIdle = true;
   }
 
-  @autobind
-  public dismiss(ev?: any, dismissAll?: boolean) {
+  public dismiss = (ev?: any, dismissAll?: boolean) => {
     const { onDismiss } = this.props;
 
     if (onDismiss) {
@@ -672,8 +670,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     return iconProps;
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {
     if (ev.which === KeyCodes.escape ||
       ev.altKey ||
       ev.metaKey ||
@@ -689,8 +686,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   /**
    * Checks if the submenu should be closed
    */
-  @autobind
-  private _shouldCloseSubMenu(ev: React.KeyboardEvent<HTMLElement>): boolean {
+  private _shouldCloseSubMenu = (ev: React.KeyboardEvent<HTMLElement>): boolean => {
     const submenuCloseKey = getRTL() ? KeyCodes.right : KeyCodes.left;
 
     if (ev.which !== submenuCloseKey || !this.props.isSubMenu) {
@@ -701,8 +697,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       (!!this._adjustedFocusZoneProps.checkForNoWrap && !shouldWrapFocus(ev.target as HTMLElement, 'data-no-horizontal-wrap'));
   }
 
-  @autobind
-  private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onMenuKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {
     if (ev.which === KeyCodes.escape || ev.altKey || ev.metaKey) {
       this._isFocusingPreviousElement = true;
       ev.preventDefault();
@@ -732,8 +727,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
    * Scroll handler for the callout to make sure the mouse events
    * for updating focus are not interacting during scroll
    */
-  @autobind
-  private _onScroll() {
+  private _onScroll = (): void => {
     if (!this._isScrollIdle && this._scrollIdleTimeoutId !== undefined) {
       this._async.clearTimeout(this._scrollIdleTimeoutId);
       this._scrollIdleTimeoutId = undefined;
@@ -763,8 +757,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     this._updateFocusOnMouseEvent(item, ev);
   }
 
-  @autobind
-  private _onMouseItemLeave(item: any, ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseItemLeave = (item: any, ev: React.MouseEvent<HTMLElement>): void => {
     if (!this._isScrollIdle) {
       return;
     }
@@ -941,8 +934,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
-  @autobind
-  private _onSubMenuDismiss(ev?: any, dismissAll?: boolean) {
+  private _onSubMenuDismiss = (ev?: any, dismissAll?: boolean): void => {
     if (dismissAll) {
       this.dismiss(ev, dismissAll);
     } else {
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
index 26c65aa91dd0a7..1241004c36f477 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -14,7 +14,6 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { TextField, ITextField } from '../../TextField';
 import { Label } from '../../Label';
 import {
-  autobind,
   BaseComponent,
   KeyCodes,
   css,
@@ -285,8 +284,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _onSelectDate(date: Date) {
+  private _onSelectDate = (date: Date): void => {
     const { formatDate, onSelectDate } = this.props;
 
     if (this.props.calendarProps && this.props.calendarProps.onSelectDate) {
@@ -307,15 +305,13 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     });
   }
 
-  @autobind
-  private _onCalloutPositioned() {
+  private _onCalloutPositioned = (): void => {
     if (this._calendar.value) {
       this._calendar.value.focus();
     }
   }
 
-  @autobind
-  private _onTextFieldFocus(ev: React.FocusEvent<HTMLElement>) {
+  private _onTextFieldFocus = (ev: React.FocusEvent<HTMLElement>): void => {
     if (this.props.disableAutoFocus) {
       return;
     }
@@ -329,13 +325,11 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _onTextFieldBlur(ev: React.FocusEvent<HTMLElement>) {
+  private _onTextFieldBlur = (ev: React.FocusEvent<HTMLElement>): void => {
     this._validateTextInput();
   }
 
-  @autobind
-  private _onTextFieldChanged(newValue: string) {
+  private _onTextFieldChanged = (newValue: string): void => {
     if (this.props.allowTextInput) {
       if (this.state.isDatePickerShown) {
         this._dismissDatePickerPopup();
@@ -350,8 +344,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _onTextFieldKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onTextFieldKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     switch (ev.which) {
       case KeyCodes.enter:
         ev.preventDefault();
@@ -376,8 +369,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _onTextFieldClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onTextFieldClick = (ev: React.MouseEvent<HTMLElement>): void => {
     if (!this.state.isDatePickerShown && !this.props.disabled) {
       this._showDatePickerPopup();
     } else {
@@ -389,8 +381,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _onIconClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onIconClick = (ev: React.MouseEvent<HTMLElement>): void => {
     ev.stopPropagation();
     this._onTextFieldClick(ev);
   }
@@ -405,8 +396,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _dismissDatePickerPopup() {
+  private _dismissDatePickerPopup = (): void => {
     if (this.state.isDatePickerShown) {
       this.setState({
         isDatePickerShown: false
@@ -419,8 +409,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   /**
    * Callback for closing the calendar callout
    */
-  @autobind
-  private _calendarDismissed() {
+  private _calendarDismissed = (): void => {
     this._preventFocusOpeningPicker = true;
     this._dismissDatePickerPopup();
 
@@ -429,13 +418,11 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  @autobind
-  private _handleEscKey(ev: React.KeyboardEvent<HTMLElement>) {
+  private _handleEscKey = (ev: React.KeyboardEvent<HTMLElement>): void => {
     this._calendarDismissed();
   }
 
-  @autobind
-  private _validateTextInput() {
+  private _validateTextInput = (): void => {
     const { isRequired, allowTextInput, strings, parseDateFromString, onSelectDate, formatDate, minDate, maxDate } = this.props;
     const inputValue = this.state.formattedDate;
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index c873d087ae8bc9..1b1d4c438c6c33 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
   BaseComponent,
-  autobind,
   css,
   getRTL,
   getId,
@@ -359,8 +358,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     );
   }
 
-  @autobind
-  private _onRenderColumnHeaderTooltip(tooltipHostProps: ITooltipHostProps, defaultRender?: IRenderFunction<ITooltipHostProps>) {
+  private _onRenderColumnHeaderTooltip = (tooltipHostProps: ITooltipHostProps, defaultRender?: IRenderFunction<ITooltipHostProps>): JSX.Element => {
     return (
       <span className={ tooltipHostProps.hostClassName }>
         { tooltipHostProps.children }
@@ -386,16 +384,13 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   /**
    * Called when the select all toggle is clicked.
    */
-
-  @autobind
-  private _onSelectAllClicked() {
+  private _onSelectAllClicked = (): void => {
     const { selection } = this.props;
 
     selection.toggleAllSelected();
   }
 
-  @autobind
-  private _onRootMouseDown(ev: MouseEvent) {
+  private _onRootMouseDown = (ev: MouseEvent): void => {
     const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
     const columnIndex = Number(columnIndexAttr);
     const { columns } = this.props;
@@ -417,8 +412,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     ev.stopPropagation();
   }
 
-  @autobind
-  private _onRootMouseMove(ev: React.MouseEvent<HTMLElement>) {
+  private _onRootMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
     const { columnResizeDetails, isSizing } = this.state;
 
     if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
@@ -426,8 +420,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  @autobind
-  private _onRootKeyDown(ev: KeyboardEvent) {
+  private _onRootKeyDown = (ev: KeyboardEvent): void => {
     const { columnResizeDetails, isSizing } = this.state;
     const { columns, onColumnResized } = this.props;
 
@@ -496,8 +489,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
    * @private
    * @param {React.MouseEvent} ev (mouse move event)
    */
-  @autobind
-  private _onSizerMouseMove(ev: React.MouseEvent<HTMLElement>) {
+  private _onSizerMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
     const {
       // use buttons property here since ev.button in some edge case is not upding well during the move.
       // but firefox doesn't support it, so we set the default value when it is not defined.
@@ -534,8 +526,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
   }
 
-  @autobind
-  private _onSizerBlur(ev: React.FocusEvent<HTMLElement>) {
+  private _onSizerBlur = (ev: React.FocusEvent<HTMLElement>): void => {
     const { columnResizeDetails } = this.state;
 
     if (columnResizeDetails) {
@@ -554,8 +545,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
    * @private
    * @param {React.MouseEvent} ev (mouse up event)
    */
-  @autobind
-  private _onSizerMouseUp(ev: React.MouseEvent<HTMLElement>) {
+  private _onSizerMouseUp = (ev: React.MouseEvent<HTMLElement>): void => {
     const { columns, onColumnIsSizingChanged } = this.props;
     const { columnResizeDetails } = this.state;
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 73103e877da0c2..32c98e5385ed03 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -6,7 +6,6 @@ import {
   BaseComponent,
   KeyCodes,
   assign,
-  autobind,
   css,
   elementContains,
   getRTLSafeKeyCode,
@@ -420,19 +419,16 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     this._forceListUpdates();
   }
 
-  @autobind
-  protected _onRenderRow(props: IDetailsRowProps, defaultRender?: any) {
+  protected _onRenderRow = (props: IDetailsRowProps, defaultRender?: any): JSX.Element => {
     return <DetailsRow { ...props } />;
   }
 
-  @autobind
-  private _onRenderDetailsHeader(detailsHeaderProps: IDetailsHeaderProps, defaultRender?: IRenderFunction<IDetailsHeaderProps>) {
+  private _onRenderDetailsHeader = (detailsHeaderProps: IDetailsHeaderProps, defaultRender?: IRenderFunction<IDetailsHeaderProps>): JSX.Element => {
     return <DetailsHeader { ...detailsHeaderProps } />;
   }
 
-  @autobind
-  private _onRenderListCell(nestingDepth: number)
-    : (item: any, itemIndex: number) => React.ReactNode {
+  private _onRenderListCell = (nestingDepth: number)
+    : (item: any, itemIndex: number) => React.ReactNode => {
     return (item: any, itemIndex: number): React.ReactNode => {
       return this._onRenderCell(nestingDepth, item, itemIndex as number);
     };
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 67c4b30c56a758..9b79de71b1a451 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -4,7 +4,6 @@ import {
   BaseComponent,
   IDisposable,
   assign,
-  autobind,
   css,
   shallowCompare,
   getNativeProps,
@@ -343,8 +342,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     selection.toggleIndexSelected(this.props.itemIndex);
   }
 
-  @autobind
-  private _onRootRef(focusZone: FocusZone) {
+  private _onRootRef = (focusZone: FocusZone): void => {
     if (focusZone) {
       // Need to resolve the actual DOM node, not the component. The element itself will be used for drag/drop and focusing.
       this._root = ReactDOM.findDOMNode(focusZone) as HTMLElement;
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
index f04eaa7838f4a1..045fb0fd3a660d 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
@@ -3,7 +3,6 @@ import { IDocumentCardProps, DocumentCardType } from './DocumentCard.types';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css
 } from '../../Utilities';
 import * as stylesImport from './DocumentCard.scss';
@@ -62,20 +61,17 @@ export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
     );
   }
 
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLElement>): void {
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
     this._onAction(ev);
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
       this._onAction(ev);
     }
   }
 
-  @autobind
-  private _onAction(ev: React.SyntheticEvent<HTMLElement>): void {
+  private _onAction = (ev: React.SyntheticEvent<HTMLElement>): void => {
     const { onClick, onClickHref } = this.props;
 
     if (onClick) {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index cf725198238f53..36e1c3dd3214d6 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -4,7 +4,6 @@ import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import * as stylesImport from './DocumentCard.scss';
@@ -79,8 +78,7 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
     );
   }
 
-  @autobind
-  private _renderPreviewList(previewImages: IDocumentCardPreviewImage[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderPreviewList = (previewImages: IDocumentCardPreviewImage[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> => {
     const { getOverflowDocumentCountText } = this.props;
 
     // Determine how many documents we won't be showing
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index 0a970d3eed25e0..089480f93466e3 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import { IDocumentCardTitleProps } from './DocumentCard.types';
@@ -82,8 +81,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     return documentCardTitle;
   }
 
-  @autobind
-  private _startTruncation(props: IDocumentCardTitleProps) {
+  private _startTruncation = (props: IDocumentCardTitleProps): void => {
     const originalTitle = props.title;
     this._isTruncated = false;
 
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
index 0e09aeebe1c00c..4e2487ea5aa6d0 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
@@ -13,7 +13,6 @@ import { IWithResponsiveModeState } from '../../utilities/decorators/withRespons
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css,
   findIndex,
   getId,
@@ -322,8 +321,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render text in dropdown input
-  @autobind
-  private _onRenderTitle(item: IDropdownOption[]): JSX.Element {
+  private _onRenderTitle = (item: IDropdownOption[]): JSX.Element => {
     const { multiSelectDelimiter = ', ' } = this.props;
 
     const displayTxt = item.map(i => i.text).join(multiSelectDelimiter);
@@ -331,8 +329,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render placeHolder text in dropdown input
-  @autobind
-  private _onRenderPlaceHolder(props: IDropdownProps): JSX.Element | null {
+  private _onRenderPlaceHolder = (props: IDropdownProps): JSX.Element | null => {
     if (!props.placeHolder) {
       return null;
     }
@@ -340,8 +337,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render Callout or Panel container and pass in list
-  @autobind
-  private _onRenderContainer(props: IDropdownProps): JSX.Element {
+  private _onRenderContainer = (props: IDropdownProps): JSX.Element => {
     const {
       onRenderList = this._onRenderList,
       responsiveMode,
@@ -387,16 +383,14 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render Caret Down Icon
-  @autobind
-  private _onRenderCaretDown(props: IDropdownProps): JSX.Element {
+  private _onRenderCaretDown = (props: IDropdownProps): JSX.Element => {
     return (
       <Icon className={ css('ms-Dropdown-caretDown', styles.caretDown) } iconName='ChevronDown' />
     );
   }
 
   // Render List of items
-  @autobind
-  private _onRenderList(props: IDropdownProps): JSX.Element {
+  private _onRenderList = (props: IDropdownProps): JSX.Element => {
     const {
       onRenderItem = this._onRenderItem
     } = this.props;
@@ -427,8 +421,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render items
-  @autobind
-  private _onRenderItem(item: IDropdownOption): JSX.Element | null {
+  private _onRenderItem = (item: IDropdownOption): JSX.Element | null => {
     switch (item.itemType) {
       case SelectableOptionMenuItemType.Divider:
         return this._renderSeparator(item);
@@ -467,8 +460,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render menu item
-  @autobind
-  private _renderOption(item: IDropdownOption): JSX.Element {
+  private _renderOption = (item: IDropdownOption): JSX.Element => {
     const { onRenderOption = this._onRenderOption } = this.props;
     const { selectedIndices = [] } = this.state;
     const id = this._id;
@@ -542,25 +534,21 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Render content of item (i.e. text/icon inside of button)
-  @autobind
-  private _onRenderOption(item: IDropdownOption): JSX.Element {
+  private _onRenderOption = (item: IDropdownOption): JSX.Element => {
     return <span className={ css('ms-Dropdown-optionText', styles.optionText) }>{ item.text }</span>;
   }
 
   // Render custom label for drop down item
-  @autobind
-  private _onRenderLabel(item: IDropdownOption) {
+  private _onRenderLabel = (item: IDropdownOption): JSX.Element | null => {
     const { onRenderOption = this._onRenderOption } = this.props;
     return onRenderOption(item, this._onRenderOption);
   }
 
-  @autobind
-  private _onPositioned() {
+  private _onPositioned = (): void => {
     this._focusZone.focus();
   }
 
-  @autobind
-  private _onItemClick(item: IDropdownOption): () => void {
+  private _onItemClick = (item: IDropdownOption): () => void => {
     return (): void => {
       if (!item.disabled) {
         this.setSelectedIndex(item.index!);
@@ -578,8 +566,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
    * Scroll handler for the callout to make sure the mouse events
    * for updating focus are not interacting during scroll
    */
-  @autobind
-  private _onScroll() {
+  private _onScroll = (): void => {
     if (!this._isScrollIdle && this._scrollIdleTimeoutId !== undefined) {
       this._async.clearTimeout(this._scrollIdleTimeoutId);
       this._scrollIdleTimeoutId = undefined;
@@ -609,8 +596,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     targetElement.focus();
   }
 
-  @autobind
-  private _onMouseItemLeave(item: any, ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseItemLeave = (item: any, ev: React.MouseEvent<HTMLElement>): void => {
     if (!this._isScrollIdle) {
       return;
     }
@@ -627,8 +613,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     }
   }
 
-  @autobind
-  private _onDismiss() {
+  private _onDismiss = (): void => {
     this.setState({ isOpen: false });
     this._dropDown.focus();
   }
@@ -684,8 +669,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     }));
   }
 
-  @autobind
-  private _onDropdownBlur(ev: React.FocusEvent<HTMLDivElement>) {
+  private _onDropdownBlur = (ev: React.FocusEvent<HTMLDivElement>): void => {
     if (this.state.isOpen) {
       // Do not onBlur when the callout is opened
       return;
@@ -695,8 +679,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     }
   }
 
-  @autobind
-  private _onDropdownKeyDown(ev: React.KeyboardEvent<HTMLDivElement>) {
+  private _onDropdownKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
       if (ev.preventDefault) {
@@ -772,8 +755,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     }
   }
 
-  @autobind
-  private _onDropdownKeyUp(ev: React.KeyboardEvent<HTMLDivElement>) {
+  private _onDropdownKeyUp = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
     if (this.props.onKeyUp) {
       this.props.onKeyUp(ev);
       if (ev.preventDefault) {
@@ -795,8 +777,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     ev.preventDefault();
   }
 
-  @autobind
-  private _onZoneKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onZoneKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     let elementToFocus;
 
     switch (ev.which) {
@@ -847,8 +828,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     ev.preventDefault();
   }
 
-  @autobind
-  private _onDropdownClick(ev: React.MouseEvent<HTMLDivElement>) {
+  private _onDropdownClick = (ev: React.MouseEvent<HTMLDivElement>): void => {
     if (this.props.onClick) {
       this.props.onClick(ev);
       if (ev.preventDefault) {
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
index 9bae4145c93601..15c5f8ddab83a5 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   elementContains,
   getNativeProps,
   divProperties,
@@ -117,8 +116,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  @autobind
-  private _onKeyboardHandler(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyboardHandler = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which !== KeyCodes.tab) {
       return;
     }
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
index 8047034318a586..58ac0603cead90 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
@@ -9,7 +9,6 @@ import {
   BaseComponent,
   EventGroup,
   KeyCodes,
-  autobind,
   css,
   divProperties,
   elementContains,
@@ -206,8 +205,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     return false;
   }
 
-  @autobind
-  private _onFocus(ev: React.FocusEvent<HTMLElement>) {
+  private _onFocus = (ev: React.FocusEvent<HTMLElement>): void => {
     const { onActiveElementChanged } = this.props;
 
     if (this._isImmediateDescendantOfZone(ev.target as HTMLElement)) {
@@ -238,8 +236,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     }
   }
 
-  @autobind
-  private _onMouseDown(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseDown = (ev: React.MouseEvent<HTMLElement>): void => {
     const { disabled } = this.props;
 
     if (disabled) {
@@ -293,8 +290,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   /**
    * Handle the keystrokes.
    */
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): boolean | undefined => {
     const { direction, disabled, isInnerZoneKeystroke } = this.props;
 
     if (disabled) {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
index a705cab90dc2d4..f30a12023f9582 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import { IGroupDividerProps } from './GroupedList.types';
@@ -130,8 +129,7 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
     );
   }
 
-  @autobind
-  private _onToggleCollapse(ev: React.MouseEvent<HTMLElement>) {
+  private _onToggleCollapse = (ev: React.MouseEvent<HTMLElement>): void => {
     const { group, onToggleCollapse, isGroupLoading } = this.props;
     const { isCollapsed } = this.state;
 
@@ -150,8 +148,7 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
     ev.preventDefault();
   }
 
-  @autobind
-  private _onToggleSelectGroupClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onToggleSelectGroupClick = (ev: React.MouseEvent<HTMLElement>): void => {
     const { onToggleSelectGroup, group } = this.props;
 
     if (onToggleSelectGroup) {
@@ -162,8 +159,7 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
     ev.stopPropagation();
   }
 
-  @autobind
-  private _onHeaderClick() {
+  private _onHeaderClick = (): void => {
     const { group, onGroupHeaderClick, onToggleSelectGroup } = this.props;
 
     if (onGroupHeaderClick) {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx
index 3480dd5a106e25..9b2e68a480f39d 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import { Link } from '../../Link';
@@ -37,8 +36,7 @@ export class GroupShowAll extends BaseComponent<IGroupDividerProps, {}> {
     return null;
   }
 
-  @autobind
-  private _onSummarizeClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onSummarizeClick = (ev: React.MouseEvent<HTMLElement>): void => {
     this.props.onToggleSummarize!(this.props.group!);
 
     ev.stopPropagation();
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
index 26f914eb1d8b4e..b3c96e75b00dcc 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   IRectangle,
-  autobind,
   assign,
   css
 } from '../../Utilities';
@@ -80,7 +79,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       className,
       usePageCache,
@@ -139,8 +138,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     }
   }
 
-  @autobind
-  private _renderGroup(group: any, groupIndex: number) {
+  private _renderGroup = (group: any, groupIndex: number): JSX.Element | null => {
     const {
       dragDropEvents,
       dragDropHelper,
@@ -220,8 +218,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     return level;
   }
 
-  @autobind
-  private _onToggleCollapse(group: IGroup) {
+  private _onToggleCollapse = (group: IGroup): void => {
     const { groupProps } = this.props;
     const onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
 
@@ -236,8 +233,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     }
   }
 
-  @autobind
-  private _onToggleSelectGroup(group: IGroup) {
+  private _onToggleSelectGroup = (group: IGroup): void => {
     if (group) {
       this.props.selection!.toggleRangeSelected(group.startIndex, group.count);
     }
@@ -265,8 +261,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     }
   }
 
-  @autobind
-  private _onToggleSummarize(group: IGroup) {
+  private _onToggleSummarize = (group: IGroup): void => {
     const { groupProps } = this.props;
     const onToggleSummarize = groupProps && groupProps.showAllProps && groupProps.showAllProps.onToggleSummarize;
 
@@ -281,10 +276,9 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     }
   }
 
-  @autobind
-  private _getPageSpecification(itemIndex: number, visibleRect: IRectangle): {
+  private _getPageSpecification = (itemIndex: number, visibleRect: IRectangle): {
     key?: string;
-  } {
+  } => {
     const groups = this.state.groups;
     const pageGroup = groups && groups[itemIndex];
     return {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
index e50e4fa1810ce1..a0719c4a7e38ef 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
@@ -13,8 +13,7 @@ import {
 import {
   BaseComponent,
   IRenderFunction,
-  IDisposable,
-  autobind
+  IDisposable
 } from '../../Utilities';
 
 import {
@@ -271,18 +270,15 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     }
   }
 
-  @autobind
-  private _onRenderGroupHeader(props: IGroupDividerProps) {
+  private _onRenderGroupHeader = (props: IGroupDividerProps): JSX.Element => {
     return <GroupHeader { ...props } />;
   }
 
-  @autobind
-  private _onRenderGroupShowAll(props: IGroupDividerProps) {
+  private _onRenderGroupShowAll = (props: IGroupDividerProps): JSX.Element => {
     return <GroupShowAll { ...props } />;
   }
 
-  @autobind
-  private _onRenderGroupFooter(props: IGroupDividerProps) {
+  private _onRenderGroupFooter = (props: IGroupDividerProps): JSX.Element => {
     return <GroupFooter { ...props } />;
   }
 
@@ -327,8 +323,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     );
   }
 
-  @autobind
-  private _renderSubGroup(subGroup: any, subGroupIndex: number) {
+  private _renderSubGroup = (subGroup: any, subGroupIndex: number): JSX.Element | null => {
     const {
       dragDropEvents,
       dragDropHelper,
@@ -389,8 +384,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   /**
    * collect all the data we need to enable drag/drop for a group
    */
-  @autobind
-  private _getGroupDragDropOptions(): IDragDropOptions {
+  private _getGroupDragDropOptions = (): IDragDropOptions => {
     const { group, groupIndex, dragDropEvents, eventsToRegister } = this.props;
     const options = {
       eventMap: eventsToRegister,
@@ -410,8 +404,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
    * @param {boolean} newValue (new isDropping state value)
    * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
    */
-  @autobind
-  private _updateDroppingState(newIsDropping: boolean, event: DragEvent) {
+  private _updateDroppingState = (newIsDropping: boolean, event: DragEvent): void => {
     const { isDropping } = this.state;
     const { dragDropEvents } = this.props;
 
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
index 49cda04fc7e26c..4a90d59729646e 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
@@ -6,8 +6,7 @@ import {
   getNativeProps,
   divProperties,
   customizable,
-  KeyCodes,
-  autobind
+  KeyCodes
 } from '../../Utilities';
 import { IExpandingCardProps, IExpandingCardStyles, ExpandingCardMode } from './ExpandingCard.types';
 import { Callout, ICallout } from '../../Callout';
@@ -103,15 +102,13 @@ export class ExpandingCard extends BaseComponent<IExpandingCardProps, IExpanding
     );
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     if (ev.which === KeyCodes.escape) {
       this.props.onLeave && this.props.onLeave(ev);
     }
   }
 
-  @autobind
-  private _onRenderCompactCard(): JSX.Element {
+  private _onRenderCompactCard = (): JSX.Element => {
     return (
       <div className={ mergeStyles(this._styles.compactCard, { height: this.props.compactCardHeight + 'px' }) as string }>
         { this.props.onRenderCompactCard!(this.props.renderData) }
@@ -119,8 +116,7 @@ export class ExpandingCard extends BaseComponent<IExpandingCardProps, IExpanding
     );
   }
 
-  @autobind
-  private _onRenderExpandedCard(): JSX.Element {
+  private _onRenderExpandedCard = (): JSX.Element => {
     // firstFrameRendered helps in initially setting height of expanded card to 1px, even if
     // mode prop is set to ExpandingCardMode.expanded on first render. This is to make sure transition animation takes place.
     !this.state.firstFrameRendered && this._async.requestAnimationFrame(() => {
@@ -144,9 +140,7 @@ export class ExpandingCard extends BaseComponent<IExpandingCardProps, IExpanding
     );
   }
 
-  @autobind
-  // tslint:disable-next-line:no-unused-variable
-  private _checkNeedsScroll(): void {
+  private _checkNeedsScroll = (): void => {
     if (this._expandedElem) {
       this._async.requestAnimationFrame(() => {
         if (this._expandedElem.scrollHeight >= this.props.expandedCardHeight!) {
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
index 7eaafff26e2881..fd03220d9fd85a 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
-  autobind,
   divProperties,
   getNativeProps,
   getId,
@@ -66,7 +65,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
       this._events.on(target, 'blur', this._cardDismiss);
     }
     if (this.props.instantOpenOnClick) {
-      this._events.on(target, 'click', this._instantOpenExpanded);
+      this._events.on(target, 'click', this._instantOpenAsExpanded);
     } else {
       this._events.on(target, 'mousedown', this._cardDismiss);
       this._events.on(target, 'keydown', this._cardDismiss);
@@ -146,8 +145,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
   }
 
   // Show HoverCard
-  @autobind
-  private _cardOpen(ev: MouseEvent) {
+  private _cardOpen = (ev: MouseEvent): void => {
     if (ev.type === 'keydown' && !(ev.which === KeyCodes.c)) {
       return;
     }
@@ -159,8 +157,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
     this._executeCardOpen(ev);
   }
 
-  @autobind
-  private _executeCardOpen(ev: MouseEvent) {
+  private _executeCardOpen = (ev: MouseEvent): void => {
     this._async.clearTimeout(this._openTimerId);
     this._openTimerId = this._async.setTimeout(() => {
       this.setState((prevState: IHoverCardState) => {
@@ -176,8 +173,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
   }
 
   // Hide HoverCard
-  @autobind
-  private _cardDismiss(ev: MouseEvent) {
+  private _cardDismiss = (ev: MouseEvent) => {
     if (ev.type === 'keydown' && (ev.which !== KeyCodes.escape)) {
       return;
     }
@@ -188,8 +184,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
     }
   }
 
-  @autobind
-  private _executeCardDimiss() {
+  private _executeCardDimiss = (): void => {
     this._async.clearTimeout(this._openTimerId);
     this._async.clearTimeout(this._dismissTimerId);
     this._dismissTimerId = this._async.setTimeout(() => {
@@ -201,9 +196,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
     }, this.props.cardDismissDelay!);
   }
 
-  // Instant Open the card in Expanded mode
-  @autobind
-  private _instantOpenExpanded(ev: React.MouseEvent<HTMLDivElement>) {
+  private _instantOpenAsExpanded = (ev: React.MouseEvent<HTMLDivElement>): void => {
     this._async.clearTimeout(this._dismissTimerId);
 
     this.setState((prevState: IHoverCardState) => {
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
index ce2ebe0699bc5d..707b3452794fd2 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import {
-  autobind,
   BaseComponent,
   classNamesFunction,
   customizable,
@@ -127,8 +126,7 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
     );
   }
 
-  @autobind
-  private _onImageLoaded(ev: React.SyntheticEvent<HTMLImageElement>): void {
+  private _onImageLoaded = (ev: React.SyntheticEvent<HTMLImageElement>): void => {
     const { src, onLoad } = this.props;
     if (onLoad) {
       onLoad(ev);
@@ -192,8 +190,7 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
     }
   }
 
-  @autobind
-  private _onImageError(ev: React.SyntheticEvent<HTMLImageElement>) {
+  private _onImageError = (ev: React.SyntheticEvent<HTMLImageElement>): void => {
     if (this.props.onError) {
       this.props.onError(ev);
     }
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
index 0da0938e619a82..95eeb01fe927f8 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   anchorProperties,
-  autobind,
   BaseComponent,
   buttonProperties,
   classNamesFunction,
@@ -65,8 +64,7 @@ export class LinkBase extends BaseComponent<ILinkProps, any> implements ILink {
     }
   }
 
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
+  private _onClick = (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
     const { onClick, disabled } = this.props;
 
     if (disabled) {
diff --git a/packages/office-ui-fabric-react/src/components/List/List.tsx b/packages/office-ui-fabric-react/src/components/List/List.tsx
index 607d2d006d82cb..8db9e856ee8de4 100644
--- a/packages/office-ui-fabric-react/src/components/List/List.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/List.tsx
@@ -8,8 +8,7 @@ import {
   getParent,
   divProperties,
   getNativeProps,
-  IRenderFunction,
-  autobind
+  IRenderFunction
 } from '../../Utilities';
 import { IList, IListProps, IPage, IPageProps } from './List.types';
 
@@ -424,8 +423,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     };
   }
 
-  @autobind
-  private _onRenderPage(pageProps: IPageProps, defaultRender?: IRenderFunction<IPageProps>): any {
+  private _onRenderPage = (pageProps: IPageProps, defaultRender?: IRenderFunction<IPageProps>): any => {
     const {
       onRenderCell,
       role
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
index 4ba53eb325c61b..f3049b6ee9dd3f 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -6,7 +6,6 @@ import {
   BaseComponent,
   IPoint,
   IRectangle,
-  autobind,
   css,
   findScrollableParent,
   getDistanceBetweenPoints,
@@ -152,8 +151,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     return false;
   }
 
-  @autobind
-  private _onMouseDown(ev: MouseEvent) {
+  private _onMouseDown = (ev: MouseEvent): void => {
     const { isEnabled, onShouldStartSelection } = this.props;
 
     // Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
@@ -182,8 +180,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     }
   }
 
-  @autobind
-  private _onTouchStart(ev: TouchEvent) {
+  private _onTouchStart = (ev: TouchEvent): void => {
     this._isTouch = true;
 
     this._async.setTimeout(() => {
@@ -191,8 +188,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     }, 0);
   }
 
-  @autobind
-  private _onPointerDown(ev: PointerEvent) {
+  private _onPointerDown = (ev: PointerEvent): void => {
     if (ev.pointerType === 'touch') {
       this._isTouch = true;
 
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
index ee806b0537517f..ef3ae6c8815677 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
@@ -3,7 +3,6 @@ import {
   BaseComponent,
   DelayedRender,
   css,
-  autobind,
   getId
 } from '../../Utilities';
 import { IconButton } from '../../Button';
@@ -206,8 +205,7 @@ export class MessageBar extends BaseComponent<IMessageBarProps, IMessageBarState
     return 'polite';
   }
 
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
+  private _onClick = (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
     this.setState({ expandSingleLine: !this.state.expandSingleLine });
   }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
index 6e2e593873acc0..1501432da5fccd 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  autobind,
   BaseComponent,
   classNamesFunction,
   customizable,
@@ -117,8 +116,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
     return this.state.selectedKey;
   }
 
-  @autobind
-  private _onRenderLink(link: INavLink) {
+  private _onRenderLink = (link: INavLink): JSX.Element => {
     const { getStyles, groups, theme } = this.props;
     const classNames = getClassNames(getStyles!, { theme: theme!, groups });
     return (<div className={ classNames.linkText }>{ link.name }</div>);
@@ -225,8 +223,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
     );
   }
 
-  @autobind
-  private _renderGroup(group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> {
+  private _renderGroup = (group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> => {
     const { getStyles, groups, theme } = this.props;
     const classNames = getClassNames(getStyles!, {
       theme: theme!,
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
index c2199b343799cb..350d3b3c57fb5f 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   css,
-  autobind,
   BaseComponent
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';
@@ -50,8 +49,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     }
   }
 
-  @autobind
-  private _onRenderItems(items: IOverflowSetItemProps[]): JSX.Element[] {
+  private _onRenderItems = (items: IOverflowSetItemProps[]): JSX.Element[] => {
     return items.map((item, i) => {
       const wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-item', styles.item) };
 
@@ -63,8 +61,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     });
   }
 
-  @autobind
-  private _onRenderOverflowButtonWrapper(items: any[]): JSX.Element {
+  private _onRenderOverflowButtonWrapper = (items: any[]): JSX.Element => {
     const wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-overflowButton', styles.item) };
     return (
       <div { ...wrapperDivProps }>
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index baee354cc6acd0..789959bdd1fdb3 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import {
   BaseComponent,
-  autobind,
   css,
   getId,
   getRTL
@@ -202,8 +201,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     }
   }
 
-  @autobind
-  public dismiss() {
+  public dismiss = (): void => {
     if (this.state.isOpen) {
       this.setState({
         isOpen: false,
@@ -218,8 +216,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     }
   }
 
-  @autobind
-  private _onRenderNavigation(props: IPanelProps): JSX.Element | null {
+  private _onRenderNavigation = (props: IPanelProps): JSX.Element | null => {
     const {
       closeButtonAriaLabel,
       hasCloseButton
@@ -253,8 +250,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     return null;
   }
 
-  @autobind
-  private _onRenderHeader(props: IPanelProps): JSX.Element | null {
+  private _onRenderHeader = (props: IPanelProps): JSX.Element | null => {
     const {
       headerText,
       componentId,
@@ -273,8 +269,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     return null;
   }
 
-  @autobind
-  private _onRenderBody(props: IPanelProps): JSX.Element {
+  private _onRenderBody = (props: IPanelProps): JSX.Element => {
     const contentClass = css(
       'ms-Panel-content',
       styles.content,
@@ -288,8 +283,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     );
   }
 
-  @autobind
-  private _onRenderFooter(props: IPanelProps): JSX.Element | null {
+  private _onRenderFooter = (props: IPanelProps): JSX.Element | null => {
     const { isFooterSticky } = this.state;
     const { onRenderFooterContent = null } = this.props;
     if (onRenderFooterContent) {
@@ -304,7 +298,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     return null;
   }
 
-  private _updateFooterPosition() {
+  private _updateFooterPosition(): void {
     const _content = this._content;
     if (_content) {
       const height = _content.clientHeight;
@@ -316,13 +310,11 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     }
   }
 
-  @autobind
-  private _onPanelClick() {
+  private _onPanelClick = (): void => {
     this.dismiss();
   }
 
-  @autobind
-  private _onTransitionComplete() {
+  private _onTransitionComplete = (): void => {
     this.setState({
       isAnimating: false
     });
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
index 35ba6e3fd38a1d..c64e7ecf63620c 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   css,
   divProperties,
   getNativeProps,
@@ -120,8 +119,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
     );
   }
 
-  @autobind
-  private _renderElement(text: string | undefined, className: string, render?: IRenderFunction<IPersonaProps>): JSX.Element {
+  private _renderElement = (text: string | undefined, className: string, render?: IRenderFunction<IPersonaProps>): JSX.Element => {
     return (
       <div className={ className }>
         { render
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
index d53682bb982686..a2a4fc2d716bb6 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  autobind,
   css,
   divProperties,
   getInitials,
@@ -146,8 +145,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
     );
   }
 
-  @autobind
-  private _onRenderCoin(props: IPersonaProps): JSX.Element | null {
+  private _onRenderCoin = (props: IPersonaProps): JSX.Element | null => {
     const {
       coinSize,
       imageUrl,
@@ -173,8 +171,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
     );
   }
 
-  @autobind
-  private _onRenderInitials(props: IPersonaProps): JSX.Element {
+  private _onRenderInitials = (props: IPersonaProps): JSX.Element => {
     let { imageInitials } = props;
     const { primaryText } = props;
 
@@ -189,8 +186,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
     );
   }
 
-  @autobind
-  private _onPhotoLoadingStateChange(loadState: ImageLoadState) {
+  private _onPhotoLoadingStateChange = (loadState: ImageLoadState) => {
     this.setState({
       isImageLoaded: loadState === ImageLoadState.loaded,
       isImageError: loadState === ImageLoadState.error
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx
index 4e37187e95313d..cbc4adc36ab51e 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  autobind,
-  css
-} from '../../Utilities';
+import { css } from '../../Utilities';
 import { Icon } from '../../Icon';
 import {
   IPersonaProps,
@@ -45,8 +42,7 @@ export class PersonaPresence extends React.Component<IPersonaProps, {}> {
     );
   }
 
-  @autobind
-  private _determineIcon(): string | undefined {
+  private _determineIcon = (): string | undefined => {
     const { presence } = this.props;
 
     if (presence !== PersonaPresenceEnum.none) {
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
index 728d2cca54ec51..e96dcae184dac6 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
@@ -3,8 +3,7 @@ import {
   BaseComponent,
   KeyCodes,
   css,
-  getId,
-  autobind
+  getId
 } from '../../Utilities';
 import { CommandButton } from '../../Button';
 import { IPivotProps } from './Pivot.types';
@@ -66,7 +65,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
       selectedTabId: this._keyToTabIds[selectedKey!],
     } as IPivotState;
 
-    this._renderLink = this._renderLink.bind(this);
+    this._renderPivotLink = this._renderPivotLink.bind(this);
   }
 
   public componentWillReceiveProps(nextProps: IPivotProps) {
@@ -111,17 +110,13 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
             { ['ms-Pivot--tabs ' + styles.rootIsTabs]: this.props.linkFormat === PivotLinkFormat.tabs }) }
           role='tablist'
         >
-          { this.state.links.map(this._renderLink) }
+          { this.state.links.map(this._renderPivotLink) }
         </ul>
       </FocusZone>
     );
   }
 
-  /**
-   * Renders a pivot link
-   */
-  @autobind
-  private _renderLink(link: IPivotItemProps) {
+  private _renderPivotLink = (link: IPivotItemProps): JSX.Element => {
     const { itemKey } = link;
     const tabId = this._keyToTabIds[itemKey as string];
     const { onRenderItemLink } = link;
@@ -156,8 +151,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
     );
   }
 
-  @autobind
-  private _renderLinkContent(link: IPivotItemProps): JSX.Element {
+  private _renderLinkContent = (link: IPivotItemProps): JSX.Element => {
     const { itemCount, itemIcon, linkText } = link;
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
index fbce41b190d11c..38c299c98d72eb 100644
--- a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
+++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
@@ -5,8 +5,7 @@ import {
   divProperties,
   doesElementContainFocus,
   getDocument,
-  getNativeProps,
-  autobind
+  getNativeProps
 } from '../../Utilities';
 import { IPopupProps } from './Popup.types';
 
@@ -76,8 +75,7 @@ export class Popup extends BaseComponent<IPopupProps, {}> {
     );
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     switch (ev.which) {
       case KeyCodes.escape:
 
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 79f32b9657e1c5..d0426e55b0806f 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -4,7 +4,6 @@ import * as ReactDOM from 'react-dom';
 /* tslint:enable:no-unused-variable */
 import * as PropTypes from 'prop-types';
 import {
-  autobind,
   BaseComponent,
   classNamesFunction,
   customizable,
@@ -104,42 +103,35 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     this._onWindowResize();
   }
 
-  @autobind
-  public subscribe(handler: (headerBound: ClientRect, footerBound: ClientRect) => void) {
+  public subscribe = (handler: (headerBound: ClientRect, footerBound: ClientRect) => void): void => {
     this._subscribers.add(handler);
   }
 
-  @autobind
-  public unsubscribe(handler: (headerBound: ClientRect, footerBound: ClientRect) => void) {
+  public unsubscribe = (handler: (headerBound: ClientRect, footerBound: ClientRect) => void): void => {
     this._subscribers.delete(handler);
   }
 
-  @autobind
-  public addStickyHeader(sticky: Sticky) {
+  public addStickyHeader = (sticky: Sticky): void => {
     this._addSticky(sticky, this._stickyAbove, this.stickyAbove, () => {
       this.stickyAbove.appendChild(sticky.content);
     });
   }
 
-  @autobind
-  public addStickyFooter(sticky: Sticky) {
+  public addStickyFooter = (sticky: Sticky): void => {
     this._addSticky(sticky, this._stickyBelow, this.stickyBelow, () => {
       this.stickyBelow.insertBefore(sticky.content, this.stickyBelow.firstChild);
     });
   }
 
-  @autobind
-  public removeStickyHeader(sticky: Sticky) {
+  public removeStickyHeader = (sticky: Sticky): void => {
     this._removeSticky(sticky, this._stickyAbove, this.stickyAbove);
   }
 
-  @autobind
-  public removeStickyFooter(sticky: Sticky) {
+  public removeStickyFooter = (sticky: Sticky): void => {
     this._removeSticky(sticky, this._stickyBelow, this.stickyBelow);
   }
 
-  @autobind
-  public notifySubscribers(sort?: boolean): void {
+  public notifySubscribers = (sort?: boolean): void => {
     this._subscribers.forEach((handle) => {
       handle(this.stickyAbove.getBoundingClientRect(), this.stickyBelow.getBoundingClientRect());
     });
@@ -151,8 +143,7 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     }
   }
 
-  @autobind
-  public getScrollPosition(): number {
+  public getScrollPosition = (): number => {
     return this.root.scrollTop;
   }
 
@@ -190,8 +181,7 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     }, 5);
   }
 
-  @autobind
-  private _setPlaceholderHeights(stickies: Set<Sticky>) {
+  private _setPlaceholderHeights = (stickies: Set<Sticky>): void => {
     stickies.forEach((sticky, idx) => {
       sticky.setPlaceholderHeight(sticky.content.clientHeight);
     });
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx
index 51fbeb97f084aa..ce1f9e48726f7a 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types';
 import {
   BaseComponent,
-  autobind,
   getId,
   KeyCodes,
   customizable,
@@ -134,8 +133,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     }
   }
 
-  @autobind
-  private _onFocusCapture(ev: React.FocusEvent<HTMLElement>) {
+  private _onFocusCapture = (ev: React.FocusEvent<HTMLElement>) => {
     this.setState({
       hasFocus: true
     });
@@ -147,8 +145,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     }
   }
 
-  @autobind
-  private _onClearClick(ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
+  private _onClearClick = (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
     const { clearButtonProps } = this.props;
 
     if (clearButtonProps && clearButtonProps.onClick) {
@@ -160,8 +157,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     }
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLInputElement>) {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
 
     switch (ev.which) {
 
@@ -191,8 +187,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     ev.stopPropagation();
   }
 
-  @autobind
-  private _onBlur(ev: React.FocusEvent<HTMLInputElement>) {
+  private _onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
     this._events.off(this._rootElement, 'blur');
     this.setState({
       hasFocus: false
@@ -203,8 +198,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     }
   }
 
-  @autobind
-  private _onInputChange(ev: React.ChangeEvent<HTMLInputElement>) {
+  private _onInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
     const value = ev.target.value;
 
     if (value === this._latestValue) {
diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
index b4303db6412e47..7b5263a715f986 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css,
   getId,
   getRTL,
@@ -160,8 +159,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     return this.state.value;
   }
 
-  @autobind
-  private _getAriaValueText(value: number | undefined): string | void {
+  private _getAriaValueText = (value: number | undefined): string | void => {
     if (this.props.ariaValueText && value !== undefined) {
       return this.props.ariaValueText(value);
     }
@@ -174,8 +172,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     };
   }
 
-  @autobind
-  private _onMouseDownOrTouchStart(event: MouseEvent | TouchEvent): void {
+  private _onMouseDownOrTouchStart = (event: MouseEvent | TouchEvent): void => {
     if (event.type === 'mousedown') {
       this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true);
       this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true);
@@ -186,8 +183,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     this._onMouseMoveOrTouchMove(event, true);
   }
 
-  @autobind
-  private _onMouseMoveOrTouchMove(event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void {
+  private _onMouseMoveOrTouchMove = (event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void => {
     const { max, min, step } = this.props;
     const steps: number = (max! - min!) / step!;
     const sliderPositionRect: ClientRect = this._sliderLine.getBoundingClientRect();
@@ -258,8 +254,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     });
   }
 
-  @autobind
-  private _onMouseUpOrTouchEnd(): void {
+  private _onMouseUpOrTouchEnd = (): void => {
     // Synchronize the renderedValue to the actual value.
     this.setState({
       renderedValue: this.state.value
@@ -268,8 +263,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     this._events.off();
   }
 
-  @autobind
-  private _onKeyDown(event: KeyboardEvent): void {
+  private _onKeyDown = (event: KeyboardEvent): void => {
     let value: number | undefined = this.state.value;
     const { max, min, step } = this.props;
 
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
index 8057bb0474ef05..2d191fb380f690 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
@@ -6,7 +6,6 @@ import {
   BaseComponent,
   getId,
   KeyCodes,
-  autobind,
   customizable,
   calculatePrecision,
   precisionRound
@@ -265,8 +264,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     }
   }
 
-  @autobind
-  private _onFocus(ev: React.FocusEvent<HTMLInputElement>) {
+  private _onFocus = (ev: React.FocusEvent<HTMLInputElement>): void => {
     if (this._spinningByMouse || this.state.keyboardSpinDirection !== KeyboardSpinDirection.notSpinning) {
       this._stop();
     }
@@ -280,8 +278,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     }
   }
 
-  @autobind
-  private _onBlur(ev: React.FocusEvent<HTMLInputElement>): void {
+  private _onBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
     this._validate(ev);
     this.setState({ isFocused: false });
     if (this.props.onBlur) {
@@ -340,8 +337,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * in the input (not when changed via the buttons)
    * @param event - the event that fired
    */
-  @autobind
-  private _validate(event: React.FocusEvent<HTMLInputElement>) {
+  private _validate = (event: React.FocusEvent<HTMLInputElement>): void => {
     const element: HTMLInputElement = event.target as HTMLInputElement;
     const value: string = element.value;
     if (this.state.value) {
@@ -358,8 +354,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * without this our value will never change (and validation will not have the correct number)
    * @param event - the event that was fired
    */
-  @autobind
-  private _onInputChange(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>): void {
+  private _onInputChange = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
     const element: HTMLInputElement = event.target as HTMLInputElement;
     const value: string = element.value;
 
@@ -374,8 +369,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * when spinning in response to a mouseDown
    * @param stepFunction - function to use to step by
    */
-  @autobind
-  private _updateValue(shouldSpin: boolean, stepDelay: number, stepFunction: (value: string) => string | void) {
+  private _updateValue = (shouldSpin: boolean, stepDelay: number, stepFunction: (value: string) => string | void): void => {
     const newValue: string | void = stepFunction(this.state.value);
     if (newValue) {
       this._lastValidValue = newValue;
@@ -394,8 +388,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
   /**
    * Stop spinning (clear any currently pending update and set spinning to false)
    */
-  @autobind
-  private _stop() {
+  private _stop = (): void => {
     if (this._currentStepFunctionHandle >= 0) {
       this._async.clearTimeout(this._currentStepFunctionHandle);
       this._currentStepFunctionHandle = -1;
@@ -412,8 +405,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * the value when up or down arrow are depressed
    * @param event - the keyboardEvent that was fired
    */
-  @autobind
-  private _handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+  private _handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
     if (this.props.disabled) {
       this._stop();
 
@@ -457,22 +449,18 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * if the up or down arrow fired this event
    * @param event stop spinning if we
    */
-  @autobind
-  private _handleKeyUp(event: React.KeyboardEvent<HTMLElement>) {
-
+  private _handleKeyUp = (event: React.KeyboardEvent<HTMLElement>): void => {
     if (this.props.disabled || event.which === KeyCodes.up || event.which === KeyCodes.down) {
       this._stop();
       return;
     }
   }
 
-  @autobind
-  private _onIncrementMouseDown() {
+  private _onIncrementMouseDown = (): void => {
     this._updateValue(true /* shouldSpin */, this._initialStepDelay, this._onIncrement!);
   }
 
-  @autobind
-  private _onDecrementMouseDown() {
+  private _onDecrementMouseDown = (): void => {
     this._updateValue(true /* shouldSpin */, this._initialStepDelay, this._onDecrement!);
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx b/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
index be825b12e4bfa9..76e69f40d396f4 100644
--- a/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
+++ b/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
@@ -4,10 +4,7 @@ import * as ReactDOM from 'react-dom';
 /* tslint:enable:no-unused-variable */
 
 import * as PropTypes from 'prop-types';
-import {
-  BaseComponent,
-  autobind
-} from '../../Utilities';
+import { BaseComponent } from '../../Utilities';
 import { IStickyProps, StickyPositionType } from './Sticky.types';
 
 export interface IStickyState {
@@ -52,7 +49,6 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     };
   }
 
-  @autobind
   public componentDidMount() {
     if (!this.context.scrollablePane) {
       throw new TypeError('Expected Sticky to be mounted within ScrollablePane');
@@ -136,8 +132,7 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     );
   }
 
-  @autobind
-  private _onScrollEvent(headerBound: ClientRect, footerBound: ClientRect) {
+  private _onScrollEvent = (headerBound: ClientRect, footerBound: ClientRect) => {
     const { top, bottom } = this.root.getBoundingClientRect();
     const { isStickyTop, isStickyBottom } = this.state;
     const { stickyPosition } = this.props;
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
index c412598f6e82de..6bd4af289bac70 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  autobind,
-  customizable
-} from '../../Utilities';
+import { customizable } from '../../Utilities';
 import {
   IColorCellProps,
   IColorPickerGridCellProps,
@@ -93,8 +90,7 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
  * Render the core of a color cell
  * @returns {JSX.Element} - Element representing the core of the item
  */
-  @autobind
-  private _onRenderColorOption(colorOption: IColorCellProps): JSX.Element {
+  private _onRenderColorOption = (colorOption: IColorCellProps): JSX.Element => {
     // Build an SVG for the cell with the given shape and color properties
     return (
       <svg className={ this._classNames.svg } viewBox='0 0 20 20' fill={ getColorFromString(colorOption.color as string)!.str } >
@@ -107,11 +103,11 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
     );
   }
 
- /**
-  * Validate if the cell's color is white or not to apply whiteCell style
-  * @param inputColor - The color of the current cell
-  * @returns - Whether the cell's color is white or not.
-  */
+  /**
+   * Validate if the cell's color is white or not to apply whiteCell style
+   * @param inputColor - The color of the current cell
+   * @returns - Whether the cell's color is white or not.
+   */
   private _isWhiteCell(inputColor: string | undefined): boolean {
     return inputColor!.toLocaleLowerCase() === '#ffffff';
   }
@@ -119,8 +115,7 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
   /**
    * Method to override the getClassNames func in a button.
    */
-  @autobind
-  private _getClassNames(
+  private _getClassNames = (
     theme: ITheme,
     className: string,
     variantClassName: string,
@@ -129,7 +124,7 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
     disabled: boolean,
     checked: boolean,
     expanded: boolean,
-    isSplit: boolean | undefined): IButtonClassNames {
+    isSplit: boolean | undefined): IButtonClassNames => {
     const styles = getActionButtonStyles(theme);
     return mergeStyleSets(this._classNames as {}, {
       root: [
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
index 55b6d77c102742..c4f7b0d55e540b 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   Async,
-  autobind,
   BaseComponent,
   classNamesFunction,
   customizable,
@@ -139,8 +138,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    * When the whole swatchColorPicker is blurred,
    * make sure to clear the pending focused stated
    */
-  @autobind
-  private _onSwatchColorPickerBlur() {
+  private _onSwatchColorPickerBlur = (): void => {
     if (this.props.onCellFocused) {
       this._cellFocused = false;
       this.props.onCellFocused();
@@ -163,8 +161,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    * @param item - The item to render
    * @returns {JSX.Element} - Element representing the item
    */
-  @autobind
-  private _renderOption(item: IColorCellProps): JSX.Element {
+  private _renderOption = (item: IColorCellProps): JSX.Element => {
     const id = this._id;
 
     return (
@@ -192,8 +189,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   /**
    * Callback passed to the GridCell that will manage triggering the onCellHovered callback for mouseEnter
    */
-  @autobind
-  private _onMouseEnter(ev: React.MouseEvent<HTMLButtonElement>): boolean {
+  private _onMouseEnter = (ev: React.MouseEvent<HTMLButtonElement>): boolean => {
 
     if (!this.props.focusOnHover) {
       if (!this.isNavigationIdle || this.props.disabled) {
@@ -213,8 +209,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   /**
    * Callback passed to the GridCell that will manage Hover/Focus updates
    */
-  @autobind
-  private _onMouseMove(ev: React.MouseEvent<HTMLButtonElement>): boolean {
+  private _onMouseMove = (ev: React.MouseEvent<HTMLButtonElement>): boolean => {
 
     if (!this.props.focusOnHover) {
       if (!this.isNavigationIdle || this.props.disabled) {
@@ -238,9 +233,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   /**
    * Callback passed to the GridCell that will manage Hover/Focus updates
    */
-  @autobind
-  private _onMouseLeave(ev: React.MouseEvent<HTMLButtonElement>): void {
-
+  private _onMouseLeave = (ev: React.MouseEvent<HTMLButtonElement>): void => {
     const parentSelector = this.props.mouseLeaveParentSelector;
 
     if (!this.props.focusOnHover ||
@@ -275,16 +268,14 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   /**
    * Callback to make sure we don't update the hovered element during mouse wheel
    */
-  @autobind
-  private _onWheel(): void {
+  private _onWheel = (): void => {
     this.setNavigationTimeout();
   }
 
   /**
    * Callback that
    */
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLButtonElement>): void {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>): void => {
     if (
       ev.which === KeyCodes.up ||
       ev.which === KeyCodes.down ||
@@ -316,8 +307,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    * Callback passed to the GridCell class that will trigger the onCellHovered callback of the SwatchColorPicker
    * NOTE: This will not be triggered if shouldFocusOnHover === true
    */
-  @autobind
-  private _onGridCellHovered(item?: IColorCellProps): void {
+  private _onGridCellHovered = (item?: IColorCellProps): void => {
     const { onCellHovered } = this.props;
 
     if (onCellHovered) {
@@ -328,8 +318,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   /**
    * Callback passed to the GridCell class that will trigger the onCellFocus callback of the SwatchColorPicker
    */
-  @autobind
-  private _onGridCellFocused(item?: IColorCellProps): void {
+  private _onGridCellFocused = (item?: IColorCellProps): void => {
     const { onCellFocused } = this.props;
     if (onCellFocused) {
       if (item) {
@@ -346,8 +335,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    * Handle the click on a cell
    * @param item - The cell that the click was fired against
    */
-  @autobind
-  private _onCellClick(item: IColorCellProps) {
+  private _onCellClick = (item: IColorCellProps): void => {
     if (this.props.disabled) {
       return;
     }
diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
index 2f3dcf4f309b8e..fea63772c11c85 100644
--- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
@@ -6,7 +6,6 @@ import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { DetailsList, DetailsListLayoutMode as LayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
 import { SelectionMode } from 'office-ui-fabric-react/lib/Selection';
 import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
-import { autobind } from '../../Utilities';
 import './ThemePage.scss';
 const ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx');
 
@@ -112,8 +111,7 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
     );
   }
 
-  @autobind
-  private _createDetailsListRef(component: DetailsList) {
+  private _createDetailsListRef = (component: DetailsList) => {
     this._list = component;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
index 8ceb7ec1219752..e34aeb73d06002 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import './ThemeGeneratorPage.scss';
-import {
-  BaseComponent,
-  autobind
-} from 'office-ui-fabric-react/lib/Utilities';
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 
 import {
   loadTheme
@@ -237,9 +234,8 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  @autobind
   /* tslint:disable:no-unused-variable */
-  private _makeThemeFromImg() {
+  private _makeThemeFromImg = (): void => {
     /* tslint:enable:no-unused-variable */
     this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value;
     (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl;
@@ -266,8 +262,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     }
   }
 
-  @autobind
-  private _cognitiveVisionCallback(e: any) {
+  private _cognitiveVisionCallback = (e: any): void => {
     const xhr = e.target;
     if (xhr.status === 200) {
       const response = JSON.parse(xhr.response);
@@ -341,13 +336,11 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     }
   }
 
-  @autobind
-  private _colorPickerOnDismiss() {
+  private _colorPickerOnDismiss = (): void => {
     this.setState({ colorPickerVisible: false });
   }
 
-  @autobind
-  private _semanticSlotRuleChanged(slotRule: IThemeSlotRule, color: string) {
+  private _semanticSlotRuleChanged = (slotRule: IThemeSlotRule, color: string): void => {
     if (this._semanticSlotColorChangeTimeout) {
       clearTimeout(this._semanticSlotColorChangeTimeout);
     }
@@ -361,8 +354,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     // but high enough that quick changes don't get bogged down by a million changes inbetween
   }
 
-  @autobind
-  private _onSwatchClick(slotRule: IThemeSlotRule, ev: React.MouseEvent<HTMLElement>) {
+  private _onSwatchClick = (slotRule: IThemeSlotRule, ev: React.MouseEvent<HTMLElement>): void => {
     const { colorPickerSlotRule, colorPickerElement } = this.state;
 
     if (colorPickerSlotRule !== null && colorPickerSlotRule !== undefined && !!colorPickerElement && colorPickerSlotRule === slotRule && colorPickerElement === ev.target) { // same one, close it
@@ -372,8 +364,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     }
   }
 
-  @autobind
-  private _slotWidget(slotRule: IThemeSlotRule) {
+  private _slotWidget = (slotRule: IThemeSlotRule): JSX.Element => {
     return (
       <div key={ slotRule.name } className='ms-themer-slot'>
         { this._colorSquareSwatchWidget(slotRule) }
@@ -387,8 +378,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  @autobind
-  private _fabricSlotWidget(fabricSlot: FabricSlots) {
+  private _fabricSlotWidget = (fabricSlot: FabricSlots): JSX.Element => {
     return this._slotWidget(this.state.themeRules[FabricSlots[fabricSlot]]);
   }
 
@@ -403,8 +393,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  @autobind
-  private _accessibilityRow(foreground: FabricSlots, background: FabricSlots) {
+  private _accessibilityRow = (foreground: FabricSlots, background: FabricSlots): JSX.Element => {
     const themeRules = this.state.themeRules;
     const bgc: IColor = themeRules[FabricSlots[background]].color!;
     const fgc: IColor = themeRules[FabricSlots[foreground]].color!;
@@ -425,8 +414,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  @autobind
-  private _outputSection() {
+  private _outputSection = (): JSX.Element => {
     const themeRules = this.state.themeRules;
 
     // strip out the unnecessary shade slots from the final output theme
@@ -472,8 +460,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  @autobind
-  private _makeNewTheme() {
+  private _makeNewTheme = (): void => {
     const themeAsJson: { [key: string]: string } = ThemeGenerator.getThemeAsJson(this.state.themeRules);
     console.log('New theme...', themeAsJson);
 
@@ -493,8 +480,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     console.log('New theme:', finalTheme);
   }
 
-  @autobind
-  private _baseColorSlotPicker(baseSlot: BaseSlots, title: string) {
+  private _baseColorSlotPicker = (baseSlot: BaseSlots, title: string): JSX.Element => {
     let colorChangeTimeout: number;
 
     function _onColorChanged(newColor: string) {
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
index 13ad62e49a8fde..fb56aeb620a8be 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind,
   getId,
   inputProperties,
   getNativeProps
@@ -71,7 +70,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
       offText,
       onAriaLabel,
       onText
-      } = this.props;
+    } = this.props;
     const { isChecked } = this.state;
     const stateText = isChecked ? onText : offText;
     const ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
@@ -122,8 +121,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
     }
   }
 
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onClick = (ev: React.MouseEvent<HTMLElement>) => {
     const { disabled, checked, onChanged, onClick } = this.props;
     const { isChecked } = this.state;
 
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
index 549019c510b50f..bec443549cccef 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
-  autobind,
   css,
   divProperties,
   getNativeProps,
@@ -66,9 +65,9 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
         ) }
         ref={ this._resolveRef('_tooltipHost') }
         { ...{ onFocusCapture: this._onTooltipMouseEnter } }
-        { ...{ onBlurCapture: this._onTooltipMouseLeave } }
+        { ...{ onBlurCapture: this._hideTooltip } }
         onMouseEnter={ this._onTooltipMouseEnter }
-        onMouseLeave={ this._onTooltipMouseLeave }
+        onMouseLeave={ this._hideTooltip }
         aria-describedby={ setAriaDescribedBy && isTooltipVisible && content ? tooltipId : undefined }
       >
         { children }
@@ -80,7 +79,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
             targetElement={ this._getTargetElement() }
             directionalHint={ directionalHint }
             directionalHintForRTL={ directionalHintForRTL }
-            calloutProps={ assign(calloutProps, { onDismiss: this._onTooltipCallOutDismiss }) }
+            calloutProps={ assign(calloutProps, { onDismiss: this._hideTooltip }) }
             { ...getNativeProps(this.props, divProperties) }
             { ...tooltipProps }
           />
@@ -108,8 +107,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
   }
 
   // Show Tooltip
-  @autobind
-  private _onTooltipMouseEnter(ev: any) {
+  private _onTooltipMouseEnter = (ev: any): void => {
     const { overflowMode } = this.props;
 
     if (overflowMode !== undefined) {
@@ -122,15 +120,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
     this._toggleTooltip(true);
   }
 
-  // Hide Tooltip
-  @autobind
-  private _onTooltipMouseLeave(ev: any) {
-    this._toggleTooltip(false);
-  }
-
-  // Hide Tooltip
-  @autobind
-  private _onTooltipCallOutDismiss() {
+  private _hideTooltip = (): void => {
     this._toggleTooltip(false);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
index 9351ba8ac67693..0be5a92fd64696 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   css
 } from '../../Utilities';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
@@ -119,8 +118,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  public dismissSuggestions(ev?: any) {
+  public dismissSuggestions = (ev?: any): void => {
     const selectItemFunction = () => {
       if (this.props.onDismiss) {
         this.props.onDismiss(
@@ -153,8 +151,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  public refocusSuggestions(keyCode: KeyCodes) {
+  public refocusSuggestions = (keyCode: KeyCodes): void => {
     this.resetFocus();
     if (this.suggestionStore.suggestions && this.suggestionStore.suggestions.length > 0) {
       if (keyCode === KeyCodes.up) {
@@ -394,8 +391,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  protected onInputChange(value: string) {
+  protected onInputChange = (value: string): void => {
     this.updateValue(value);
     this.setState({
       moreSuggestionsAvailable: true,
@@ -403,22 +399,19 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     });
   }
 
-  @autobind
-  protected onSuggestionClick(ev: React.MouseEvent<HTMLElement>, item: any, index: number) {
+  protected onSuggestionClick = (ev: React.MouseEvent<HTMLElement>, item: any, index: number): void => {
     this.addItemByIndex(index);
     this.setState({ suggestionsVisible: false });
   }
 
-  @autobind
-  protected onSuggestionRemove(ev: React.MouseEvent<HTMLElement>, item: IPersonaProps, index: number) {
+  protected onSuggestionRemove = (ev: React.MouseEvent<HTMLElement>, item: IPersonaProps, index: number): void => {
     if (this.props.onRemoveSuggestion) {
       (this.props.onRemoveSuggestion as any)(item);
     }
     this.suggestionStore.removeSuggestion(index);
   }
 
-  @autobind
-  protected onInputFocus(ev: React.FocusEvent<HTMLInputElement | Autofill>) {
+  protected onInputFocus = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {
     this.setState({ isFocused: true });
     this.selection.setAllSelected(false);
     if (this.input && this.input.value === '' && this.props.onEmptyInputFocus) {
@@ -439,16 +432,14 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  protected onInputBlur(ev: React.FocusEvent<HTMLInputElement | Autofill>) {
+  protected onInputBlur = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {
     this.setState({ isFocused: false });
     if (this.props.inputProps && this.props.inputProps.onBlur) {
       this.props.inputProps.onBlur(ev as React.FocusEvent<HTMLInputElement>);
     }
   }
 
-  @autobind
-  protected onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  protected onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
     const keyCode = ev.which;
     switch (keyCode) {
       case KeyCodes.escape:
@@ -543,8 +534,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  protected onItemChange(changedItem: T, index: number) {
+  protected onItemChange = (changedItem: T, index: number): void => {
     const { items } = this.state;
 
     if (index >= 0) {
@@ -555,8 +545,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  protected onGetMoreResults() {
+  protected onGetMoreResults = (): void => {
     this.setState({
       isSearching: true
     }, () => {
@@ -585,8 +574,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     });
   }
 
-  @autobind
-  protected addItemByIndex(index: number): void {
+  protected addItemByIndex = (index: number): void => {
     this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item);
     if (this.input) {
       this.input.clear();
@@ -594,8 +582,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     this.updateValue('');
   }
 
-  @autobind
-  protected addItem(item: T) {
+  protected addItem = (item: T): void => {
     const processedItem: T | PromiseLike<T> | null =
       this.props.onItemSelected ? (this.props.onItemSelected as any)(item) : item;
 
@@ -618,8 +605,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     this.setState({ suggestedDisplayValue: '' });
   }
 
-  @autobind
-  protected removeItem(item: IPickerItemProps<T>) {
+  protected removeItem = (item: IPickerItemProps<T>): void => {
     const { items } = this.state;
     const index: number = items.indexOf(item);
 
@@ -629,8 +615,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  protected removeItems(itemsToRemove: any[]) {
+  protected removeItems = (itemsToRemove: any[]): void => {
     const { items } = this.state;
     const newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
     const firstItemToRemove = itemsToRemove[0];
@@ -651,8 +636,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  @autobind
-  protected _isFocusZoneInnerKeystroke(ev: React.KeyboardEvent<HTMLElement>): boolean {
+  protected _isFocusZoneInnerKeystroke = (ev: React.KeyboardEvent<HTMLElement>): boolean => {
     // If suggestions are shown const up/down keys control them, otherwise allow them through to control the focusZone.
     if (this.state.suggestionsVisible) {
       switch (ev.which) {
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
index aec95c5743a6a2..a49ac00f9020e8 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
@@ -1,7 +1,7 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
-import { BaseComponent, autobind, css } from '../../../../Utilities';
+import { BaseComponent, css } from '../../../../Utilities';
 import { IPeoplePickerItemWithMenuProps } from './PeoplePickerItem.types';
 import { Persona, PersonaPresence } from '../../../../Persona';
 import { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu';
@@ -68,13 +68,11 @@ export class SelectedItemWithMenu extends BaseComponent<IPeoplePickerItemWithMen
     );
   }
 
-  @autobind
-  private _onContextualMenu(ev?: any) {
+  private _onContextualMenu = (ev?: any): void => {
     this.setState({ contextualMenuVisible: true });
   }
 
-  @autobind
-  private _onCloseContextualMenu(ev: Event) {
+  private _onCloseContextualMenu = (ev: Event) => {
     this.setState({ contextualMenuVisible: false });
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
index d39d62bce8d7d7..e652f40b14dacb 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   css,
-  autobind,
   KeyCodes
 } from '../../../Utilities';
 import { CommandButton, IconButton, IButton } from '../../../Button';
@@ -135,7 +134,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
               styles.actionButton,
               {
                 ['is-selected ' + styles.buttonSelected]:
-                this.state.selectedActionType === SuggestionActionType.forceResolve
+                  this.state.selectedActionType === SuggestionActionType.forceResolve
               }) }
             onClick={ this._forceResolve }
           >
@@ -158,7 +157,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
               styles.actionButton,
               {
                 ['is-selected ' + styles.buttonSelected]:
-                this.state.selectedActionType === SuggestionActionType.searchMore
+                  this.state.selectedActionType === SuggestionActionType.searchMore
               }) }
             iconProps={ { iconName: 'Search' } }
             onClick={ this._getMoreResults }
@@ -193,8 +192,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
   /**
    * Returns true if the event was handled, false otherwise
    */
-  @autobind
-  public tryHandleKeyDown(keyCode: number, currentSuggestionIndex: number): boolean {
+  public tryHandleKeyDown = (keyCode: number, currentSuggestionIndex: number): boolean => {
     let isEventHandled = false;
     let newSelectedActionType = null;
     const currentSelectedAction = this.state.selectedActionType;
@@ -352,41 +350,35 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
       </div>);
   }
 
-  @autobind
-  private _getMoreResults() {
+  private _getMoreResults = (): void => {
     if (this.props.onGetMoreResults) {
       this.props.onGetMoreResults();
     }
   }
 
-  @autobind
-  private _forceResolve() {
+  private _forceResolve = (): void => {
     if (this.props.createGenericItem) {
       this.props.createGenericItem();
     }
   }
 
-  @autobind
-  private _shouldShowForceResolve() {
+  private _shouldShowForceResolve = (): boolean => {
     return this.props.showForceResolve ? this.props.showForceResolve() : false;
   }
 
-  @autobind
-  private _onClickTypedSuggestionsItem(item: T, index: number): (ev: React.MouseEvent<HTMLElement>) => void {
+  private _onClickTypedSuggestionsItem = (item: T, index: number): (ev: React.MouseEvent<HTMLElement>) => void => {
     return (ev: React.MouseEvent<HTMLElement>): void => {
       this.props.onSuggestionClick(ev, item, index);
     };
   }
 
-  @autobind
-  private _refocusOnSuggestions(keyCode: number): void {
+  private _refocusOnSuggestions = (keyCode: number): void => {
     if (typeof this.props.refocusSuggestions === 'function') {
       this.props.refocusSuggestions(keyCode);
     }
   }
 
-  @autobind
-  private _onRemoveTypedSuggestionsItem(item: T, index: number): (ev: React.MouseEvent<HTMLElement>) => void {
+  private _onRemoveTypedSuggestionsItem = (item: T, index: number): (ev: React.MouseEvent<HTMLElement>) => void => {
     return (ev: React.MouseEvent<HTMLElement>): void => {
       const onSuggestionRemove = this.props.onSuggestionRemove!;
       onSuggestionRemove(ev, item, index);
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
index 4b4e47c92db527..140543d2b997a4 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
@@ -1,5 +1,3 @@
-import { autobind } from '../../../Utilities';
-
 export interface ISuggestionModel<T> {
   item: T;
   selected: boolean;
@@ -119,17 +117,15 @@ export class SuggestionsController<T> {
     }
   }
 
-  @autobind
-  private _isSuggestionModel(
+  private _isSuggestionModel = (
     value: ISuggestionModel<T> | T
-    ): value is ISuggestionModel<T> {
+  ): value is ISuggestionModel<T> => {
     return (<ISuggestionModel<T>>value).item !== undefined;
   }
 
-  @autobind
-  private _ensureSuggestionModel(
+  private _ensureSuggestionModel = (
     suggestion: ISuggestionModel<T> | T
-    ): ISuggestionModel<T> {
+  ): ISuggestionModel<T> => {
     if (this._isSuggestionModel(suggestion)) {
       return suggestion as ISuggestionModel<T>;
     } else {
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
index b5e8ac9a4a94f6..8b9dd4f93b6854 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  autobind,
   css,
   getId,
 } from '../../Utilities';
@@ -58,8 +57,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
     );
   }
 
-  @autobind
-  private _onClick() {
+  private _onClick = (): void => {
     const {
       onClick,
       disabled,
@@ -71,8 +69,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
     }
   }
 
-  @autobind
-  private _onMouseEnter(ev: React.MouseEvent<HTMLButtonElement>) {
+  private _onMouseEnter = (ev: React.MouseEvent<HTMLButtonElement>): void => {
     const {
       onHover,
       disabled,
@@ -87,8 +84,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
     }
   }
 
-  @autobind
-  private _onMouseMove(ev: React.MouseEvent<HTMLButtonElement>) {
+  private _onMouseMove = (ev: React.MouseEvent<HTMLButtonElement>): void => {
     const {
       onHover,
       disabled,
@@ -103,8 +99,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
     }
   }
 
-  @autobind
-  private _onMouseLeave(ev: React.MouseEvent<HTMLButtonElement>) {
+  private _onMouseLeave = (ev: React.MouseEvent<HTMLButtonElement>): void => {
     const {
       onHover,
       disabled,
@@ -118,8 +113,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
     }
   }
 
-  @autobind
-  private _onFocus() {
+  private _onFocus = (): void => {
     const {
       onFocus,
       disabled,
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
index e350b7466eb597..19205f859dea90 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  autobind,
   elementContains,
   findScrollableParent,
   getParent,
@@ -107,13 +106,11 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * been called on an element, so we need a flag to store the idea that we will bypass the "next"
    * focus event that occurs. This method does that.
    */
-  @autobind
-  public ignoreNextFocus() {
+  public ignoreNextFocus = (): void => {
     this._handleNextFocus(false);
   }
 
-  @autobind
-  private _onMouseDownCapture(ev: any) {
+  private _onMouseDownCapture = (ev: any): void => {
     if (document.activeElement !== ev.target && !elementContains(document.activeElement as HTMLElement, ev.target)) {
       this.ignoreNextFocus();
       return;
@@ -140,8 +137,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them
    * specially.
    */
-  @autobind
-  private _onFocus(ev: React.FocusEvent<HTMLElement>) {
+  private _onFocus = (ev: React.FocusEvent<HTMLElement>): void => {
     const target = ev.target as HTMLElement;
     const { selection } = this.props;
     const isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
@@ -173,8 +169,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     this._handleNextFocus(false);
   }
 
-  @autobind
-  private _onMouseDown(ev: React.MouseEvent<HTMLElement>) {
+  private _onMouseDown = (ev: React.MouseEvent<HTMLElement>): void => {
     this._updateModifiers(ev);
 
     let target = ev.target as HTMLElement;
@@ -203,13 +198,11 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  @autobind
-  private _onTouchStartCapture(ev: React.TouchEvent<HTMLElement>) {
+  private _onTouchStartCapture = (ev: React.TouchEvent<HTMLElement>): void => {
     this._setIsTouch(true);
   }
 
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
     this._updateModifiers(ev);
 
     let target = ev.target as HTMLElement;
@@ -247,8 +240,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  @autobind
-  private _onContextMenu(ev: React.MouseEvent<HTMLElement>) {
+  private _onContextMenu = (ev: React.MouseEvent<HTMLElement>): void => {
     const target = ev.target as HTMLElement;
 
     const { onItemContextMenu, selection } = this.props;
@@ -284,8 +276,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * In multi selection, if you double click within an item's root (but not within the invoke element or input elements),
    * we should execute the invoke handler.
    */
-  @autobind
-  private _onDoubleClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onDoubleClick = (ev: React.MouseEvent<HTMLElement>): void => {
     let target = ev.target as HTMLElement;
 
     if (this._isSelectionDisabled(target)) {
@@ -317,15 +308,13 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  @autobind
-  private _onKeyDownCapture(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDownCapture = (ev: React.KeyboardEvent<HTMLElement>): void => {
     this._updateModifiers(ev);
 
     this._handleNextFocus(true);
   }
 
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): boolean | undefined => {
     this._updateModifiers(ev);
 
     let target = ev.target as HTMLElement;
diff --git a/packages/utilities/src/autobind.ts b/packages/utilities/src/autobind.ts
index 834ed03d62168d..c57aa87cde410e 100644
--- a/packages/utilities/src/autobind.ts
+++ b/packages/utilities/src/autobind.ts
@@ -1,6 +1,7 @@
 /**
  * Autobind is a utility for binding methods in a class. This simplifies tagging methods as being "bound" to the this pointer
  * so that they can be used in scenarios that simply require a function callback.
+ * @deprecated This has been deprecated in favor of using arrow function properties
  */
 // tslint:disable-next-line:no-any
 export function autobind<T extends Function>(target: any, key: string, descriptor: TypedPropertyDescriptor<T>): {