From 7b63ed952ad6d8ef01caec3fcac7d0faa4681b13 Mon Sep 17 00:00:00 2001
From: Paul Fitzgerald <paulfitz99@gmail.com>
Date: Fri, 7 Dec 2018 09:54:09 +0000
Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=93=96Update=20to=20use=20FC=20and=20?=
 =?UTF-8?q?not=20SFC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DefinitelyTyped/DefinitelyTyped#30364
---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1a261b9..1e6e5ea 100644
--- a/README.md
+++ b/README.md
@@ -104,10 +104,10 @@ npm i -D @types/react @types/react-dom @types/react-redux
 
 # React Types Cheatsheet
 
-#### `React.StatelessComponent<P>` or `React.SFC<P>`
-Type representing stateless functional component
+#### `React.FunctionComponent<P>` or `React.FC<P>`
+Type representing a functional component
 ```tsx
-const MyComponent: React.SFC<MyComponentProps> = ...
+const MyComponent: React.FC<MyComponentProps> = ...
 ```
 [⇧ back to top](#table-of-contents)
 

From 9c496f2e0f86d031793dd80dc996456f73b9eecb Mon Sep 17 00:00:00 2001
From: Paul Fitzgerald <paulfitz99@gmail.com>
Date: Fri, 7 Dec 2018 09:58:34 +0000
Subject: [PATCH 2/7] Update README.md

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1e6e5ea..2ea4e81 100644
--- a/README.md
+++ b/README.md
@@ -119,7 +119,7 @@ class MyComponent extends React.Component<MyComponentProps, State> { ...
 [⇧ back to top](#table-of-contents)
 
 #### `React.ComponentType<P>`
-Type representing union type of (SFC | Component)
+Type representing union type of (FC | Component)
 ```tsx
 const withState = <P extends WrappedComponentProps>(
   WrappedComponent: React.ComponentType<P>,
@@ -179,13 +179,13 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 ```tsx
 import * as React from 'react';
 
-export interface SFCCounterProps {
+export interface FCCounterProps {
   label: string;
   count: number;
   onIncrement: () => any;
 }
 
-export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
+export const FCCounter: React.FC<FCCounterProps> = (props) => {
   const { label, count, onIncrement } = props;
 
   const handleIncrement = () => { onIncrement(); };
@@ -211,12 +211,12 @@ export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
 ```tsx
 import * as React from 'react';
 
-export interface SFCSpreadAttributesProps {
+export interface FCSpreadAttributesProps {
   className?: string;
   style?: React.CSSProperties;
 }
 
-export const SFCSpreadAttributes: React.SFC<SFCSpreadAttributesProps> = (props) => {
+export const FCSpreadAttributes: React.FC<FCSpreadAttributesProps> = (props) => {
   const { children, ...restProps } = props;
 
   return (

From 05808f9c50e0b547190818f243a615df4502cad9 Mon Sep 17 00:00:00 2001
From: Paul Fitzgerald <paulfitz99@gmail.com>
Date: Fri, 7 Dec 2018 10:01:48 +0000
Subject: [PATCH 3/7] Update README.md

---
 README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 2ea4e81..126b267 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ This gives you the power to prioritize our work and support the project contribu
 - [Type Definitions & Complementary Libraries](#type-definitions--complementary-libraries)
 - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
 - [Component Typing Patterns](#component-typing-patterns)
-  - [Stateless Components - SFC](#stateless-components---sfc)
+  - [Function Components - FC](#function-components---ffc)
   - [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__
   - [Generic Components](#generic-components)
   - [Render Props](#render-props) 🌟 __NEW__
@@ -172,9 +172,9 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 # Component Typing Patterns
 
-## Stateless Components - SFC
+## Function Components - FC
 
-#### - stateless counter
+#### - functional counter
 
 ```tsx
 import * as React from 'react';
@@ -519,13 +519,13 @@ export const withState = <WrappedProps extends InjectedProps>(
 import * as React from 'react';
 
 import { withState } from '../hoc';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
-const SFCCounterWithState =
-  withState(SFCCounter);
+const FCCounterWithState =
+  withState(FCCounter);
 
 export default () => (
-  <SFCCounterWithState label={'SFCCounterWithState'} />
+  <FCCounterWithState label={'FCCounterWithState'} />
 );
 
 ```

From 2b7a20a41c77f378143eba0209b57450f03ad75e Mon Sep 17 00:00:00 2001
From: Paul Fitzgerald <paulfitz99@gmail.com>
Date: Wed, 12 Dec 2018 15:51:22 +0000
Subject: [PATCH 4/7] Update README.md

---
 README.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 126b267..6907c15 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ This gives you the power to prioritize our work and support the project contribu
 - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
 - [Component Typing Patterns](#component-typing-patterns)
   - [Function Components - FC](#function-components---ffc)
-  - [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__
+  - [Class Components - Class](#class-components---class) 📝 __UPDATED__
   - [Generic Components](#generic-components)
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
@@ -112,7 +112,7 @@ const MyComponent: React.FC<MyComponentProps> = ...
 [⇧ back to top](#table-of-contents)
 
 #### `React.Component<P, S>`
-Type representing stateful class component
+Type representing a class component
 ```tsx
 class MyComponent extends React.Component<MyComponentProps, State> { ...
 ```
@@ -174,7 +174,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 ## Function Components - FC
 
-#### - functional counter
+#### - counter component
 
 ```tsx
 import * as React from 'react';
@@ -234,14 +234,14 @@ export const FCSpreadAttributes: React.FC<FCSpreadAttributesProps> = (props) =>
 
 ---
 
-## Stateful Components - Class
+## Class Components - Class
 
-#### - stateful counter
+#### - class counter
 
 ```tsx
 import * as React from 'react';
 
-export interface StatefulCounterProps {
+export interface ClassCounterProps {
   label: string;
 }
 
@@ -249,7 +249,7 @@ interface State {
   readonly count: number;
 }
 
-export class StatefulCounter extends React.Component<StatefulCounterProps, State> {
+export class ClassCounter extends React.Component<ClassCounterProps, State> {
   readonly state: State = {
     count: 0,
   };
@@ -276,7 +276,7 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
 
 ```
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounter)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounter)
 
 [⇧ back to top](#table-of-contents)
 
@@ -285,7 +285,7 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
 ```tsx
 import * as React from 'react';
 
-export interface StatefulCounterWithDefaultProps {
+export interface ClassCounterWithDefaultProps {
   label: string;
   initialCount?: number;
 }
@@ -298,8 +298,8 @@ interface State {
   readonly count: number;
 }
 
-export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =
-  class extends React.Component<StatefulCounterWithDefaultProps & DefaultProps> {
+export const ClassCounterWithDefault: React.ComponentClass<ClassCounterWithDefaultProps> =
+  class extends React.Component<ClassCounterWithDefaultProps & DefaultProps> {
     // to make defaultProps strictly typed we need to explicitly declare their type
     // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
     static defaultProps: DefaultProps = {
@@ -310,7 +310,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit
       count: this.props.initialCount,
     };
 
-    componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
+    componentWillReceiveProps({ initialCount }: ClassCounterWithDefaultProps) {
       if (initialCount != null && initialCount !== this.props.initialCount) {
         this.setState({ count: initialCount });
       }
@@ -338,7 +338,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit
 
 ```
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounterwithdefault)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefault)
 
 [⇧ back to top](#table-of-contents)
 
@@ -1450,7 +1450,7 @@ Related `ts-lint` rule: https://palantir.github.io/tslint/rules/interface-over-t
 ### - how to best initialize class instance or static properties?
 > Prefered modern style is to use class Property Initializers  
 ```tsx
-class StatefulCounterWithInitialCount extends React.Component<Props, State> {
+class ClassCounterWithInitialCount extends React.Component<Props, State> {
   // default props using Property Initializers
   static defaultProps: DefaultProps = {
     className: 'default-class',
@@ -1470,7 +1470,7 @@ class StatefulCounterWithInitialCount extends React.Component<Props, State> {
 ### - how to best declare component handler functions?
 > Prefered modern style is to use Class Fields with arrow functions  
 ```tsx
-class StatefulCounter extends React.Component<Props, State> {
+class ClassCounter extends React.Component<Props, State> {
 // handlers using Class Fields with arrow functions
   handleIncrement = () => {
     this.setState({ count: this.state.count + 1 });

From 6c7e19c5eb1a173ef22390a151cf0c46ade0bc65 Mon Sep 17 00:00:00 2001
From: Paul Fitzgerald <paulfitz99@gmail.com>
Date: Wed, 12 Dec 2018 15:52:47 +0000
Subject: [PATCH 5/7] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6907c15..9a33def 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ This gives you the power to prioritize our work and support the project contribu
 - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
 - [Component Typing Patterns](#component-typing-patterns)
   - [Function Components - FC](#function-components---ffc)
-  - [Class Components - Class](#class-components---class) 📝 __UPDATED__
+  - [Class Components ](#class-components---class) 📝 __UPDATED__
   - [Generic Components](#generic-components)
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
@@ -234,7 +234,7 @@ export const FCSpreadAttributes: React.FC<FCSpreadAttributesProps> = (props) =>
 
 ---
 
-## Class Components - Class
+## Class Components
 
 #### - class counter
 

From 4fb66fb5819ccaced167bd74ea8a94f511eaef7c Mon Sep 17 00:00:00 2001
From: Paul Fitzgerald <paulfitz99@gmail.com>
Date: Wed, 12 Dec 2018 15:53:24 +0000
Subject: [PATCH 6/7] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9a33def..b373db8 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ This gives you the power to prioritize our work and support the project contribu
 - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
 - [Component Typing Patterns](#component-typing-patterns)
   - [Function Components - FC](#function-components---ffc)
-  - [Class Components ](#class-components---class) 📝 __UPDATED__
+  - [Class Components ](#class-components) 📝 __UPDATED__
   - [Generic Components](#generic-components)
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__

From d57e7c9b0e61aae2782a4f70f72232b224afcd31 Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:25:16 +0100
Subject: [PATCH 7/7] Refactored all previous references related to SFC,
 stateless & stateful in favour of function and class components

Other minor improvements
---
 CONTRIBUTING.md                               |   4 +-
 README.md                                     | 158 ++++++++++--------
 README_SOURCE.md                              |  40 ++---
 ...md => class-counter-with-default-props.md} |   4 +-
 ...x => class-counter-with-default-props.tsx} |  13 +-
 ...class-counter-with-default-props.usage.tsx |   7 +
 playground/src/components/class-counter.md    |  11 ++
 ...stateful-counter.tsx => class-counter.tsx} |  18 +-
 .../src/components/class-counter.usage.tsx    |   5 +
 playground/src/components/error-message.tsx   |   2 +-
 playground/src/components/fc-counter.md       |  11 ++
 .../{sfc-counter.tsx => fc-counter.tsx}       |  14 +-
 ...counter.usage.tsx => fc-counter.usage.tsx} |   6 +-
 ...-attributes.md => fc-spread-attributes.md} |   4 +-
 .../src/components/fc-spread-attributes.tsx   |  12 ++
 ...age.tsx => fc-spread-attributes.usage.tsx} |   6 +-
 playground/src/components/index.ts            |   8 +-
 playground/src/components/sfc-counter.md      |  11 --
 .../src/components/sfc-spread-attributes.tsx  |  16 --
 .../stateful-counter-with-default.usage.tsx   |   9 -
 playground/src/components/stateful-counter.md |  11 --
 .../src/components/stateful-counter.usage.tsx |   9 -
 .../fc-counter-connected-extended.tsx         |  21 +++
 .../fc-counter-connected-extended.usage.tsx   |  10 ++
 ...e.tsx => fc-counter-connected-verbose.tsx} |  18 +-
 .../fc-counter-connected-verbose.usage.tsx    |   7 +
 ...connected.tsx => fc-counter-connected.tsx} |  11 +-
 .../connected/fc-counter-connected.usage.tsx  |   5 +
 playground/src/connected/index.ts             |   6 +-
 .../sfc-counter-connected-extended.tsx        |  17 --
 .../sfc-counter-connected-extended.usage.tsx  |   5 -
 .../sfc-counter-connected-verbose.usage.tsx   |   9 -
 .../connected/sfc-counter-connected.usage.tsx |   9 -
 playground/src/hoc/with-state.usage.tsx       |   9 +-
 playground/src/pages/home.tsx                 |  16 +-
 playground/styleguide.config.js               |  44 ++---
 36 files changed, 294 insertions(+), 272 deletions(-)
 rename playground/src/components/{stateful-counter-with-default.md => class-counter-with-default-props.md} (50%)
 rename playground/src/components/{stateful-counter-with-default.tsx => class-counter-with-default-props.tsx} (85%)
 create mode 100644 playground/src/components/class-counter-with-default-props.usage.tsx
 create mode 100644 playground/src/components/class-counter.md
 rename playground/src/components/{stateful-counter.tsx => class-counter.tsx} (67%)
 create mode 100644 playground/src/components/class-counter.usage.tsx
 create mode 100644 playground/src/components/fc-counter.md
 rename playground/src/components/{sfc-counter.tsx => fc-counter.tsx} (58%)
 rename playground/src/components/{sfc-counter.usage.tsx => fc-counter.usage.tsx} (77%)
 rename playground/src/components/{sfc-spread-attributes.md => fc-spread-attributes.md} (55%)
 create mode 100644 playground/src/components/fc-spread-attributes.tsx
 rename playground/src/components/{sfc-spread-attributes.usage.tsx => fc-spread-attributes.usage.tsx} (64%)
 delete mode 100644 playground/src/components/sfc-counter.md
 delete mode 100644 playground/src/components/sfc-spread-attributes.tsx
 delete mode 100644 playground/src/components/stateful-counter-with-default.usage.tsx
 delete mode 100644 playground/src/components/stateful-counter.md
 delete mode 100644 playground/src/components/stateful-counter.usage.tsx
 create mode 100644 playground/src/connected/fc-counter-connected-extended.tsx
 create mode 100644 playground/src/connected/fc-counter-connected-extended.usage.tsx
 rename playground/src/connected/{sfc-counter-connected-verbose.tsx => fc-counter-connected-verbose.tsx} (57%)
 create mode 100644 playground/src/connected/fc-counter-connected-verbose.usage.tsx
 rename playground/src/connected/{sfc-counter-connected.tsx => fc-counter-connected.tsx} (60%)
 create mode 100644 playground/src/connected/fc-counter-connected.usage.tsx
 delete mode 100644 playground/src/connected/sfc-counter-connected-extended.tsx
 delete mode 100644 playground/src/connected/sfc-counter-connected-extended.usage.tsx
 delete mode 100644 playground/src/connected/sfc-counter-connected-verbose.usage.tsx
 delete mode 100644 playground/src/connected/sfc-counter-connected.usage.tsx

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6fe5a9c..a7d55d1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -22,8 +22,8 @@ Don't edit `README.md` directly - it is generated automatically from `README_SOU
 **Source code inject directives:**
 ```
 # Inject code block with highlighter
-::codeblock='playground/src/components/sfc-counter.tsx'::
+::codeblock='playground/src/components/fc-counter.tsx'::
 
 # Inject code block with highlighter and expander
-::expander='playground/src/components/sfc-counter.usage.tsx'::
+::expander='playground/src/components/fc-counter.usage.tsx'::
 ```
diff --git a/README.md b/README.md
index d61a664..6cd28f3 100644
--- a/README.md
+++ b/README.md
@@ -176,25 +176,29 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 ## Function Components - FC
 
-#### - counter component
+#### - FC counter
 
 ```tsx
 import * as React from 'react';
 
-export interface SFCCounterProps {
+type Props = {
   label: string;
   count: number;
   onIncrement: () => any;
-}
+};
 
-export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
+export const FCCounter: React.FC<Props> = props => {
   const { label, count, onIncrement } = props;
 
-  const handleIncrement = () => { onIncrement(); };
+  const handleIncrement = () => {
+    onIncrement();
+  };
 
   return (
     <div>
-      <span>{label}: {count} </span>
+      <span>
+        {label}: {count}{' '}
+      </span>
       <button type="button" onClick={handleIncrement}>
         {`Increment`}
       </button>
@@ -204,7 +208,7 @@ export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
 
 ```
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#sfccounter)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounter)
 
 [⇧ back to top](#table-of-contents)
 
@@ -213,24 +217,20 @@ export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
 ```tsx
 import * as React from 'react';
 
-export interface SFCSpreadAttributesProps {
+type Props = {
   className?: string;
   style?: React.CSSProperties;
-}
+};
 
-export const SFCSpreadAttributes: React.SFC<SFCSpreadAttributesProps> = (props) => {
+export const FCSpreadAttributes: React.FC<Props> = props => {
   const { children, ...restProps } = props;
 
-  return (
-    <div {...restProps}>
-      {children}
-    </div>
-  );
+  return <div {...restProps}>{children}</div>;
 };
 
 ```
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#sfcspreadattributes)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fcspreadattributes)
 
 [⇧ back to top](#table-of-contents)
 
@@ -243,22 +243,22 @@ export const SFCSpreadAttributes: React.SFC<SFCSpreadAttributesProps> = (props)
 ```tsx
 import * as React from 'react';
 
-export interface StatefulCounterProps {
+type Props = {
   label: string;
-}
+};
 
-interface State {
-  readonly count: number;
-}
+type State = {
+  count: number;
+};
 
-export class StatefulCounter extends React.Component<StatefulCounterProps, State> {
+export class ClassCounter extends React.Component<Props, State> {
   readonly state: State = {
     count: 0,
   };
 
   handleIncrement = () => {
     this.setState({ count: this.state.count + 1 });
-  }
+  };
 
   render() {
     const { handleIncrement } = this;
@@ -267,7 +267,9 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
 
     return (
       <div>
-        <span>{label}: {count} </span>
+        <span>
+          {label}: {count}{' '}
+        </span>
         <button type="button" onClick={handleIncrement}>
           {`Increment`}
         </button>
@@ -287,16 +289,19 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
 ```tsx
 import * as React from 'react';
 
-type Props = Readonly<{
+type Props = {
   label: string;
   initialCount: number;
-}>;
+};
 
-type State = Readonly<{
+type State = {
   count: number;
-}>;
+};
 
-export class StatefulCounterWithDefault extends React.Component<Props, State> {
+export class ClassCounterWithDefaultProps extends React.Component<
+  Props,
+  State
+> {
   static defaultProps = {
     initialCount: 0,
   };
@@ -335,7 +340,7 @@ export class StatefulCounterWithDefault extends React.Component<Props, State> {
 
 ```
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefault)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefaultprops)
 
 [⇧ back to top](#table-of-contents)
 
@@ -516,14 +521,11 @@ export const withState = <WrappedProps extends InjectedProps>(
 import * as React from 'react';
 
 import { withState } from '../hoc';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
-const SFCCounterWithState =
-  withState(SFCCounter);
+const FCCounterWithState = withState(FCCounter);
 
-export default () => (
-  <SFCCounterWithState label={'SFCCounterWithState'} />
-);
+export default () => <FCCounterWithState label={'FCCounterWithState'} />;
 
 ```
 </p></details>
@@ -647,15 +649,18 @@ import Types from 'Types';
 import { connect } from 'react-redux';
 
 import { countersActions, countersSelectors } from '../features/counters';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
 const mapStateToProps = (state: Types.RootState) => ({
   count: countersSelectors.getReduxCounter(state.counters),
 });
 
-export const SFCCounterConnected = connect(mapStateToProps, {
-  onIncrement: countersActions.increment,
-})(SFCCounter);
+export const FCCounterConnected = connect(
+  mapStateToProps,
+  {
+    onIncrement: countersActions.increment,
+  }
+)(FCCounter);
 
 ```
 <details><summary><i>Click to expand</i></summary><p>
@@ -663,13 +668,9 @@ export const SFCCounterConnected = connect(mapStateToProps, {
 ```tsx
 import * as React from 'react';
 
-import { SFCCounterConnected } from '../connected';
+import { FCCounterConnected } from '.';
 
-export default () => (
-  <SFCCounterConnected
-    label={'SFCCounterConnected'}
-  />
-);
+export default () => <FCCounterConnected label={'FCCounterConnected'} />;
 
 ```
 </p></details>
@@ -684,18 +685,24 @@ import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
 import { countersActions } from '../features/counters';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
 const mapStateToProps = (state: Types.RootState) => ({
   count: state.counters.reduxCounter,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) => bindActionCreators({
-  onIncrement: countersActions.increment,
-}, dispatch);
+const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) =>
+  bindActionCreators(
+    {
+      onIncrement: countersActions.increment,
+    },
+    dispatch
+  );
 
-export const SFCCounterConnectedVerbose =
-  connect(mapStateToProps, mapDispatchToProps)(SFCCounter);
+export const FCCounterConnectedVerbose = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FCCounter);
 
 ```
 <details><summary><i>Click to expand</i></summary><p>
@@ -703,12 +710,10 @@ export const SFCCounterConnectedVerbose =
 ```tsx
 import * as React from 'react';
 
-import { SFCCounterConnectedVerbose } from '../connected';
+import { FCCounterConnectedVerbose } from '.';
 
 export default () => (
-  <SFCCounterConnectedVerbose
-    label={'SFCCounterConnectedVerbose'}
-  />
+  <FCCounterConnectedVerbose label={'FCCounterConnectedVerbose'} />
 );
 
 ```
@@ -723,19 +728,23 @@ import Types from 'Types';
 import { connect } from 'react-redux';
 
 import { countersActions, countersSelectors } from '../features/counters';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
-export interface SFCCounterConnectedExtendedProps {
+type OwnProps = {
   initialCount: number;
-}
+};
 
-const mapStateToProps = (state: Types.RootState, ownProps: SFCCounterConnectedExtendedProps) => ({
-  count: countersSelectors.getReduxCounter(state.counters) + ownProps.initialCount,
+const mapStateToProps = (state: Types.RootState, ownProps: OwnProps) => ({
+  count:
+    countersSelectors.getReduxCounter(state.counters) + ownProps.initialCount,
 });
 
-export const SFCCounterConnectedExtended = connect(mapStateToProps, {
-  onIncrement: countersActions.increment,
-})(SFCCounter);
+export const FCCounterConnectedExtended = connect(
+  mapStateToProps,
+  {
+    onIncrement: countersActions.increment,
+  }
+)(FCCounter);
 
 ```
 <details><summary><i>Click to expand</i></summary><p>
@@ -743,9 +752,14 @@ export const SFCCounterConnectedExtended = connect(mapStateToProps, {
 ```tsx
 import * as React from 'react';
 
-import { SFCCounterConnectedExtended } from '../connected';
+import { FCCounterConnectedExtended } from '.';
 
-export default () => <SFCCounterConnectedExtended label={'SFCCounterConnectedExtended'} initialCount={10} />;
+export default () => (
+  <FCCounterConnectedExtended
+    label={'FCCounterConnectedExtended'}
+    initialCount={10}
+  />
+);
 
 ```
 </p></details>
@@ -1171,7 +1185,7 @@ export const getFilteredTodos = createSelector(getTodos, getTodosFilter, (todos,
 ## Typing connect
 
 Below snippet can be find in the `playground/` folder, you can checkout the repo and follow all dependencies to understand the bigger picture.
-`playground/src/connected/sfc-counter-connected-verbose.tsx`
+`playground/src/connected/fc-counter-connected-verbose.tsx`
 
 ```tsx
 import Types from 'Types';
@@ -1180,10 +1194,10 @@ import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
 import { countersActions } from '../features/counters';
-import { SFCCounter, SFCCounterProps } from '../components';
+import { FCCounter } from '../components';
 
 // `state` parameter needs a type annotation to type-check the correct shape of a state object but also it'll be used by "type inference" to infer the type of returned props
-const mapStateToProps = (state: Types.RootState, ownProps: SFCCounterProps) => ({
+const mapStateToProps = (state: Types.RootState, ownProps: FCCounterProps) => ({
   count: state.counters.reduxCounter,
 });
 
@@ -1195,8 +1209,8 @@ const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) => bindActionC
 }, dispatch);
 
 // NOTE: We don't need to pass generic type arguments to neither connect nor mapping functions because type inference will do all this work automatically. So there's really no reason to increase the noise ratio in your codebase!
-export const SFCCounterConnectedVerbose =
-  connect(mapStateToProps, mapDispatchToProps)(SFCCounter);
+export const FCCounterConnectedVerbose =
+  connect(mapStateToProps, mapDispatchToProps)(FCCounter);
 ```
 
 [⇧ back to top](#table-of-contents)
@@ -1430,7 +1444,7 @@ Using this solution you'll achieve better encapsulation for internal structure/n
 // 1. in `components/` folder create component file (`select.tsx`) with default export:
 
 // components/select.tsx
-const Select: React.SFC<Props> = (props) => {
+const Select: React.FC<Props> = (props) => {
 ...
 export default Select;
 
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 2953476..1db0fdc 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -176,19 +176,19 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 ## Function Components - FC
 
-#### - counter component
+#### - FC counter
 
-::codeblock='playground/src/components/sfc-counter.tsx'::
+::codeblock='playground/src/components/fc-counter.tsx'::
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#sfccounter)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounter)
 
 [⇧ back to top](#table-of-contents)
 
 #### - spread attributes [link](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes)
 
-::codeblock='playground/src/components/sfc-spread-attributes.tsx'::
+::codeblock='playground/src/components/fc-spread-attributes.tsx'::
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#sfcspreadattributes)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fcspreadattributes)
 
 [⇧ back to top](#table-of-contents)
 
@@ -198,7 +198,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 #### - class counter
 
-::codeblock='playground/src/components/stateful-counter.tsx'::
+::codeblock='playground/src/components/class-counter.tsx'::
 
 [⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounter)
 
@@ -206,9 +206,9 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 #### - with default props
 
-::codeblock='playground/src/components/stateful-counter-with-default.tsx'::
+::codeblock='playground/src/components/class-counter-with-default-props.tsx'::
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefault)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefaultprops)
 
 [⇧ back to top](#table-of-contents)
 
@@ -290,22 +290,22 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 
 #### - redux connected counter
 
-::codeblock='playground/src/connected/sfc-counter-connected.tsx'::
-::expander='playground/src/connected/sfc-counter-connected.usage.tsx'::
+::codeblock='playground/src/connected/fc-counter-connected.tsx'::
+::expander='playground/src/connected/fc-counter-connected.usage.tsx'::
 
 [⇧ back to top](#table-of-contents)
 
 #### - redux connected counter (verbose)
 
-::codeblock='playground/src/connected/sfc-counter-connected-verbose.tsx'::
-::expander='playground/src/connected/sfc-counter-connected-verbose.usage.tsx'::
+::codeblock='playground/src/connected/fc-counter-connected-verbose.tsx'::
+::expander='playground/src/connected/fc-counter-connected-verbose.usage.tsx'::
 
 [⇧ back to top](#table-of-contents)
 
 #### - with own props
 
-::codeblock='playground/src/connected/sfc-counter-connected-extended.tsx'::
-::expander='playground/src/connected/sfc-counter-connected-extended.usage.tsx'::
+::codeblock='playground/src/connected/fc-counter-connected-extended.tsx'::
+::expander='playground/src/connected/fc-counter-connected-extended.usage.tsx'::
 
 [⇧ back to top](#table-of-contents)
 
@@ -468,7 +468,7 @@ When creating a store instance we don't need to provide any additional types. It
 ## Typing connect
 
 Below snippet can be find in the `playground/` folder, you can checkout the repo and follow all dependencies to understand the bigger picture.
-`playground/src/connected/sfc-counter-connected-verbose.tsx`
+`playground/src/connected/fc-counter-connected-verbose.tsx`
 
 ```tsx
 import Types from 'Types';
@@ -477,10 +477,10 @@ import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
 import { countersActions } from '../features/counters';
-import { SFCCounter, SFCCounterProps } from '../components';
+import { FCCounter } from '../components';
 
 // `state` parameter needs a type annotation to type-check the correct shape of a state object but also it'll be used by "type inference" to infer the type of returned props
-const mapStateToProps = (state: Types.RootState, ownProps: SFCCounterProps) => ({
+const mapStateToProps = (state: Types.RootState, ownProps: FCCounterProps) => ({
   count: state.counters.reduxCounter,
 });
 
@@ -492,8 +492,8 @@ const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) => bindActionC
 }, dispatch);
 
 // NOTE: We don't need to pass generic type arguments to neither connect nor mapping functions because type inference will do all this work automatically. So there's really no reason to increase the noise ratio in your codebase!
-export const SFCCounterConnectedVerbose =
-  connect(mapStateToProps, mapDispatchToProps)(SFCCounter);
+export const FCCounterConnectedVerbose =
+  connect(mapStateToProps, mapDispatchToProps)(FCCounter);
 ```
 
 [⇧ back to top](#table-of-contents)
@@ -572,7 +572,7 @@ Using this solution you'll achieve better encapsulation for internal structure/n
 // 1. in `components/` folder create component file (`select.tsx`) with default export:
 
 // components/select.tsx
-const Select: React.SFC<Props> = (props) => {
+const Select: React.FC<Props> = (props) => {
 ...
 export default Select;
 
diff --git a/playground/src/components/stateful-counter-with-default.md b/playground/src/components/class-counter-with-default-props.md
similarity index 50%
rename from playground/src/components/stateful-counter-with-default.md
rename to playground/src/components/class-counter-with-default-props.md
index d6e4e24..010957d 100644
--- a/playground/src/components/stateful-counter-with-default.md
+++ b/playground/src/components/class-counter-with-default-props.md
@@ -1,10 +1,10 @@
 Usage:
-```jsx { "filePath": "./stateful-counter-with-default.usage.tsx" }
+```jsx { "filePath": "./class-counter-with-default-props.usage.tsx" }
 ```
 
 Usage Demo:
 ```jsx 
-const Demo = require('./stateful-counter-with-default.usage').default;
+const Demo = require('./class-counter-with-default-props.usage').default;
 <Demo />
 ```
 
diff --git a/playground/src/components/stateful-counter-with-default.tsx b/playground/src/components/class-counter-with-default-props.tsx
similarity index 85%
rename from playground/src/components/stateful-counter-with-default.tsx
rename to playground/src/components/class-counter-with-default-props.tsx
index 17fc115..851f330 100644
--- a/playground/src/components/stateful-counter-with-default.tsx
+++ b/playground/src/components/class-counter-with-default-props.tsx
@@ -1,15 +1,18 @@
 import * as React from 'react';
 
-type Props = Readonly<{
+type Props = {
   label: string;
   initialCount: number;
-}>;
+};
 
-type State = Readonly<{
+type State = {
   count: number;
-}>;
+};
 
-export class StatefulCounterWithDefault extends React.Component<Props, State> {
+export class ClassCounterWithDefaultProps extends React.Component<
+  Props,
+  State
+> {
   static defaultProps = {
     initialCount: 0,
   };
diff --git a/playground/src/components/class-counter-with-default-props.usage.tsx b/playground/src/components/class-counter-with-default-props.usage.tsx
new file mode 100644
index 0000000..2f6c7bf
--- /dev/null
+++ b/playground/src/components/class-counter-with-default-props.usage.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { ClassCounterWithDefaultProps } from '.';
+
+export default () => (
+  <ClassCounterWithDefaultProps label={'ClassCounterWithDefaultProps'} />
+);
diff --git a/playground/src/components/class-counter.md b/playground/src/components/class-counter.md
new file mode 100644
index 0000000..b6345e4
--- /dev/null
+++ b/playground/src/components/class-counter.md
@@ -0,0 +1,11 @@
+Usage:
+```jsx { "filePath": "./class-counter.usage.tsx" }
+```
+
+Usage Demo:
+```jsx
+const Demo = require('./class-counter.usage').default;
+<Demo />
+```
+
+[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--class-counter)
diff --git a/playground/src/components/stateful-counter.tsx b/playground/src/components/class-counter.tsx
similarity index 67%
rename from playground/src/components/stateful-counter.tsx
rename to playground/src/components/class-counter.tsx
index e4629e9..2e547cc 100644
--- a/playground/src/components/stateful-counter.tsx
+++ b/playground/src/components/class-counter.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
 
-export interface StatefulCounterProps {
+type Props = {
   label: string;
-}
+};
 
-interface State {
-  readonly count: number;
-}
+type State = {
+  count: number;
+};
 
-export class StatefulCounter extends React.Component<StatefulCounterProps, State> {
+export class ClassCounter extends React.Component<Props, State> {
   readonly state: State = {
     count: 0,
   };
 
   handleIncrement = () => {
     this.setState({ count: this.state.count + 1 });
-  }
+  };
 
   render() {
     const { handleIncrement } = this;
@@ -24,7 +24,9 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
 
     return (
       <div>
-        <span>{label}: {count} </span>
+        <span>
+          {label}: {count}{' '}
+        </span>
         <button type="button" onClick={handleIncrement}>
           {`Increment`}
         </button>
diff --git a/playground/src/components/class-counter.usage.tsx b/playground/src/components/class-counter.usage.tsx
new file mode 100644
index 0000000..2734455
--- /dev/null
+++ b/playground/src/components/class-counter.usage.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+import { ClassCounter } from '.';
+
+export default () => <ClassCounter label={'ClassCounter'} />;
diff --git a/playground/src/components/error-message.tsx b/playground/src/components/error-message.tsx
index a3929ac..e91981e 100644
--- a/playground/src/components/error-message.tsx
+++ b/playground/src/components/error-message.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const ErrorMessage: React.SFC<{ onReset: () => void }> = ({
+export const ErrorMessage: React.FC<{ onReset: () => void }> = ({
   onReset,
 }) => {
   return (
diff --git a/playground/src/components/fc-counter.md b/playground/src/components/fc-counter.md
new file mode 100644
index 0000000..b839819
--- /dev/null
+++ b/playground/src/components/fc-counter.md
@@ -0,0 +1,11 @@
+Usage:
+```jsx { "filePath": "./fc-counter.usage.tsx" }
+```
+
+Usage Demo:
+```jsx
+const Demo = require('./fc-counter.usage').default;
+<Demo />
+```
+
+[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--fc-counter)
diff --git a/playground/src/components/sfc-counter.tsx b/playground/src/components/fc-counter.tsx
similarity index 58%
rename from playground/src/components/sfc-counter.tsx
rename to playground/src/components/fc-counter.tsx
index a75b0a4..23f0cec 100644
--- a/playground/src/components/sfc-counter.tsx
+++ b/playground/src/components/fc-counter.tsx
@@ -1,19 +1,23 @@
 import * as React from 'react';
 
-export interface SFCCounterProps {
+type Props = {
   label: string;
   count: number;
   onIncrement: () => any;
-}
+};
 
-export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
+export const FCCounter: React.FC<Props> = props => {
   const { label, count, onIncrement } = props;
 
-  const handleIncrement = () => { onIncrement(); };
+  const handleIncrement = () => {
+    onIncrement();
+  };
 
   return (
     <div>
-      <span>{label}: {count} </span>
+      <span>
+        {label}: {count}{' '}
+      </span>
       <button type="button" onClick={handleIncrement}>
         {`Increment`}
       </button>
diff --git a/playground/src/components/sfc-counter.usage.tsx b/playground/src/components/fc-counter.usage.tsx
similarity index 77%
rename from playground/src/components/sfc-counter.usage.tsx
rename to playground/src/components/fc-counter.usage.tsx
index 4a3d532..4aff6c0 100644
--- a/playground/src/components/sfc-counter.usage.tsx
+++ b/playground/src/components/fc-counter.usage.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 
-import { SFCCounter } from '../components';
+import { FCCounter } from '.';
 
 export default class extends React.Component<{}, { count: number }> {
   state = { count: 0 };
 
   render() {
     return (
-      <SFCCounter
-        label={'SFCCounter'}
+      <FCCounter
+        label={'FCCounter'}
         count={this.state.count}
         onIncrement={() => {
           this.setState({ count: this.state.count + 1 });
diff --git a/playground/src/components/sfc-spread-attributes.md b/playground/src/components/fc-spread-attributes.md
similarity index 55%
rename from playground/src/components/sfc-spread-attributes.md
rename to playground/src/components/fc-spread-attributes.md
index 9dd1635..93a52dc 100644
--- a/playground/src/components/sfc-spread-attributes.md
+++ b/playground/src/components/fc-spread-attributes.md
@@ -1,10 +1,10 @@
 Usage:
-```jsx { "filePath": "./sfc-spread-attributes.usage.tsx" }
+```jsx { "filePath": "./fc-spread-attributes.usage.tsx" }
 ```
 
 Usage Demo:
 ```jsx
-const Demo = require('./sfc-spread-attributes.usage').default;
+const Demo = require('./fc-spread-attributes.usage').default;
 <Demo />
 ```
 
diff --git a/playground/src/components/fc-spread-attributes.tsx b/playground/src/components/fc-spread-attributes.tsx
new file mode 100644
index 0000000..8aa90b1
--- /dev/null
+++ b/playground/src/components/fc-spread-attributes.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+type Props = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const FCSpreadAttributes: React.FC<Props> = props => {
+  const { children, ...restProps } = props;
+
+  return <div {...restProps}>{children}</div>;
+};
diff --git a/playground/src/components/sfc-spread-attributes.usage.tsx b/playground/src/components/fc-spread-attributes.usage.tsx
similarity index 64%
rename from playground/src/components/sfc-spread-attributes.usage.tsx
rename to playground/src/components/fc-spread-attributes.usage.tsx
index b880145..92c1fde 100644
--- a/playground/src/components/sfc-spread-attributes.usage.tsx
+++ b/playground/src/components/fc-spread-attributes.usage.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import { SFCSpreadAttributes } from '../components';
+import { FCSpreadAttributes } from '.';
 
 export default () => (
-  <SFCSpreadAttributes
+  <FCSpreadAttributes
     className={'classy'}
     style={{ backgroundColor: 'lightcyan' }}
   >
     {`I'll spread every property you give me!`}
-  </SFCSpreadAttributes>
+  </FCSpreadAttributes>
 );
diff --git a/playground/src/components/index.ts b/playground/src/components/index.ts
index 1930915..ac8706e 100644
--- a/playground/src/components/index.ts
+++ b/playground/src/components/index.ts
@@ -1,8 +1,8 @@
 export * from './error-message';
 export * from './generic-list';
-export * from './sfc-counter';
-export * from './sfc-spread-attributes';
-export * from './stateful-counter';
-export * from './stateful-counter-with-default';
+export * from './fc-counter';
+export * from './fc-spread-attributes';
+export * from './class-counter';
+export * from './class-counter-with-default-props';
 export * from './name-provider';
 export * from './mouse-provider';
diff --git a/playground/src/components/sfc-counter.md b/playground/src/components/sfc-counter.md
deleted file mode 100644
index 05fa977..0000000
--- a/playground/src/components/sfc-counter.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Usage:
-```jsx { "filePath": "./sfc-counter.usage.tsx" }
-```
-
-Usage Demo:
-```jsx
-const Demo = require('./sfc-counter.usage').default;
-<Demo />
-```
-
-[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--stateless-counter)
diff --git a/playground/src/components/sfc-spread-attributes.tsx b/playground/src/components/sfc-spread-attributes.tsx
deleted file mode 100644
index 4660a07..0000000
--- a/playground/src/components/sfc-spread-attributes.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export interface SFCSpreadAttributesProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export const SFCSpreadAttributes: React.SFC<SFCSpreadAttributesProps> = (props) => {
-  const { children, ...restProps } = props;
-
-  return (
-    <div {...restProps}>
-      {children}
-    </div>
-  );
-};
diff --git a/playground/src/components/stateful-counter-with-default.usage.tsx b/playground/src/components/stateful-counter-with-default.usage.tsx
deleted file mode 100644
index 8ad44d5..0000000
--- a/playground/src/components/stateful-counter-with-default.usage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-import { StatefulCounterWithDefault } from '../components';
-
-export default () => (
-  <StatefulCounterWithDefault
-    label={'StatefulCounter'}
-  />
-);
diff --git a/playground/src/components/stateful-counter.md b/playground/src/components/stateful-counter.md
deleted file mode 100644
index 3811ed1..0000000
--- a/playground/src/components/stateful-counter.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Usage:
-```jsx { "filePath": "./stateful-counter.usage.tsx" }
-```
-
-Usage Demo:
-```jsx
-const Demo = require('./stateful-counter.usage').default;
-<Demo />
-```
-
-[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--stateful-counter)
diff --git a/playground/src/components/stateful-counter.usage.tsx b/playground/src/components/stateful-counter.usage.tsx
deleted file mode 100644
index 7fc4b9a..0000000
--- a/playground/src/components/stateful-counter.usage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-import { StatefulCounter } from '../components';
-
-export default () => (
-  <StatefulCounter
-    label={'StatefulCounter'}
-  />
-);
diff --git a/playground/src/connected/fc-counter-connected-extended.tsx b/playground/src/connected/fc-counter-connected-extended.tsx
new file mode 100644
index 0000000..e84c9a7
--- /dev/null
+++ b/playground/src/connected/fc-counter-connected-extended.tsx
@@ -0,0 +1,21 @@
+import Types from 'Types';
+import { connect } from 'react-redux';
+
+import { countersActions, countersSelectors } from '../features/counters';
+import { FCCounter } from '../components';
+
+type OwnProps = {
+  initialCount: number;
+};
+
+const mapStateToProps = (state: Types.RootState, ownProps: OwnProps) => ({
+  count:
+    countersSelectors.getReduxCounter(state.counters) + ownProps.initialCount,
+});
+
+export const FCCounterConnectedExtended = connect(
+  mapStateToProps,
+  {
+    onIncrement: countersActions.increment,
+  }
+)(FCCounter);
diff --git a/playground/src/connected/fc-counter-connected-extended.usage.tsx b/playground/src/connected/fc-counter-connected-extended.usage.tsx
new file mode 100644
index 0000000..da025d3
--- /dev/null
+++ b/playground/src/connected/fc-counter-connected-extended.usage.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { FCCounterConnectedExtended } from '.';
+
+export default () => (
+  <FCCounterConnectedExtended
+    label={'FCCounterConnectedExtended'}
+    initialCount={10}
+  />
+);
diff --git a/playground/src/connected/sfc-counter-connected-verbose.tsx b/playground/src/connected/fc-counter-connected-verbose.tsx
similarity index 57%
rename from playground/src/connected/sfc-counter-connected-verbose.tsx
rename to playground/src/connected/fc-counter-connected-verbose.tsx
index dfc9b55..cb952ae 100644
--- a/playground/src/connected/sfc-counter-connected-verbose.tsx
+++ b/playground/src/connected/fc-counter-connected-verbose.tsx
@@ -3,15 +3,21 @@ import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
 import { countersActions } from '../features/counters';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
 const mapStateToProps = (state: Types.RootState) => ({
   count: state.counters.reduxCounter,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) => bindActionCreators({
-  onIncrement: countersActions.increment,
-}, dispatch);
+const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) =>
+  bindActionCreators(
+    {
+      onIncrement: countersActions.increment,
+    },
+    dispatch
+  );
 
-export const SFCCounterConnectedVerbose =
-  connect(mapStateToProps, mapDispatchToProps)(SFCCounter);
+export const FCCounterConnectedVerbose = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FCCounter);
diff --git a/playground/src/connected/fc-counter-connected-verbose.usage.tsx b/playground/src/connected/fc-counter-connected-verbose.usage.tsx
new file mode 100644
index 0000000..6e47ddf
--- /dev/null
+++ b/playground/src/connected/fc-counter-connected-verbose.usage.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { FCCounterConnectedVerbose } from '.';
+
+export default () => (
+  <FCCounterConnectedVerbose label={'FCCounterConnectedVerbose'} />
+);
diff --git a/playground/src/connected/sfc-counter-connected.tsx b/playground/src/connected/fc-counter-connected.tsx
similarity index 60%
rename from playground/src/connected/sfc-counter-connected.tsx
rename to playground/src/connected/fc-counter-connected.tsx
index 3863ab4..82568e3 100644
--- a/playground/src/connected/sfc-counter-connected.tsx
+++ b/playground/src/connected/fc-counter-connected.tsx
@@ -2,12 +2,15 @@ import Types from 'Types';
 import { connect } from 'react-redux';
 
 import { countersActions, countersSelectors } from '../features/counters';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
 const mapStateToProps = (state: Types.RootState) => ({
   count: countersSelectors.getReduxCounter(state.counters),
 });
 
-export const SFCCounterConnected = connect(mapStateToProps, {
-  onIncrement: countersActions.increment,
-})(SFCCounter);
+export const FCCounterConnected = connect(
+  mapStateToProps,
+  {
+    onIncrement: countersActions.increment,
+  }
+)(FCCounter);
diff --git a/playground/src/connected/fc-counter-connected.usage.tsx b/playground/src/connected/fc-counter-connected.usage.tsx
new file mode 100644
index 0000000..7cd6da6
--- /dev/null
+++ b/playground/src/connected/fc-counter-connected.usage.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+import { FCCounterConnected } from '.';
+
+export default () => <FCCounterConnected label={'FCCounterConnected'} />;
diff --git a/playground/src/connected/index.ts b/playground/src/connected/index.ts
index 404261b..33625dc 100644
--- a/playground/src/connected/index.ts
+++ b/playground/src/connected/index.ts
@@ -1,3 +1,3 @@
-export * from './sfc-counter-connected-extended';
-export * from './sfc-counter-connected-verbose';
-export * from './sfc-counter-connected';
+export * from './fc-counter-connected-extended';
+export * from './fc-counter-connected-verbose';
+export * from './fc-counter-connected';
diff --git a/playground/src/connected/sfc-counter-connected-extended.tsx b/playground/src/connected/sfc-counter-connected-extended.tsx
deleted file mode 100644
index 84e01f1..0000000
--- a/playground/src/connected/sfc-counter-connected-extended.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Types from 'Types';
-import { connect } from 'react-redux';
-
-import { countersActions, countersSelectors } from '../features/counters';
-import { SFCCounter } from '../components';
-
-export interface SFCCounterConnectedExtendedProps {
-  initialCount: number;
-}
-
-const mapStateToProps = (state: Types.RootState, ownProps: SFCCounterConnectedExtendedProps) => ({
-  count: countersSelectors.getReduxCounter(state.counters) + ownProps.initialCount,
-});
-
-export const SFCCounterConnectedExtended = connect(mapStateToProps, {
-  onIncrement: countersActions.increment,
-})(SFCCounter);
diff --git a/playground/src/connected/sfc-counter-connected-extended.usage.tsx b/playground/src/connected/sfc-counter-connected-extended.usage.tsx
deleted file mode 100644
index 7321ffc..0000000
--- a/playground/src/connected/sfc-counter-connected-extended.usage.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-import { SFCCounterConnectedExtended } from '../connected';
-
-export default () => <SFCCounterConnectedExtended label={'SFCCounterConnectedExtended'} initialCount={10} />;
diff --git a/playground/src/connected/sfc-counter-connected-verbose.usage.tsx b/playground/src/connected/sfc-counter-connected-verbose.usage.tsx
deleted file mode 100644
index 0d48a37..0000000
--- a/playground/src/connected/sfc-counter-connected-verbose.usage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-import { SFCCounterConnectedVerbose } from '../connected';
-
-export default () => (
-  <SFCCounterConnectedVerbose
-    label={'SFCCounterConnectedVerbose'}
-  />
-);
diff --git a/playground/src/connected/sfc-counter-connected.usage.tsx b/playground/src/connected/sfc-counter-connected.usage.tsx
deleted file mode 100644
index c6baf27..0000000
--- a/playground/src/connected/sfc-counter-connected.usage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-import { SFCCounterConnected } from '../connected';
-
-export default () => (
-  <SFCCounterConnected
-    label={'SFCCounterConnected'}
-  />
-);
diff --git a/playground/src/hoc/with-state.usage.tsx b/playground/src/hoc/with-state.usage.tsx
index 12c76c5..d27c99c 100644
--- a/playground/src/hoc/with-state.usage.tsx
+++ b/playground/src/hoc/with-state.usage.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 
 import { withState } from '../hoc';
-import { SFCCounter } from '../components';
+import { FCCounter } from '../components';
 
-const SFCCounterWithState =
-  withState(SFCCounter);
+const FCCounterWithState = withState(FCCounter);
 
-export default () => (
-  <SFCCounterWithState label={'SFCCounterWithState'} />
-);
+export default () => <FCCounterWithState label={'FCCounterWithState'} />;
diff --git a/playground/src/pages/home.tsx b/playground/src/pages/home.tsx
index d4a330a..0cb0293 100644
--- a/playground/src/pages/home.tsx
+++ b/playground/src/pages/home.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 
-import SFCCounter from '../components/sfc-counter.usage';
-import SFCSpreadAttributes from '../components/sfc-spread-attributes.usage';
-import StatefulCounter from '../components/stateful-counter.usage';
-import StatefulCounterWithInitialCount from '../components/stateful-counter-with-default.usage';
+import FCCounter from '../components/fc-counter.usage';
+import FCSpreadAttributes from '../components/fc-spread-attributes.usage';
+import ClassCounter from '../components/class-counter.usage';
+import ClassCounterWithDefaultProps from '../components/class-counter-with-default-props.usage';
 import UserListUsage from '../components/generic-list.usage';
 
 export const Home = () => {
   return (
     <section>
-      <SFCCounter />
-      <SFCSpreadAttributes />
-      <StatefulCounter />
-      <StatefulCounterWithInitialCount />
+      <FCCounter />
+      <FCSpreadAttributes />
+      <ClassCounter />
+      <ClassCounterWithDefaultProps />
       <UserListUsage />
     </section>
   );
diff --git a/playground/styleguide.config.js b/playground/styleguide.config.js
index a58c3bb..f7ed140 100644
--- a/playground/styleguide.config.js
+++ b/playground/styleguide.config.js
@@ -13,34 +13,32 @@ module.exports = {
   sections: [
     {
       name: 'Introduction',
-      content: './docs/intro.md'
+      content: './docs/intro.md',
     },
     {
-      name: 'Stateless Components - SFC',
-      components: () => ([
-        './src/components/sfc-counter.tsx',
-        './src/components/sfc-spread-attributes.tsx',
-      ]),
+      name: 'Function Components',
+      components: () => [
+        './src/components/fc-counter.tsx',
+        './src/components/fc-spread-attributes.tsx',
+      ],
     },
     {
-      name: 'Stateful Components - Class',
-      components: () => ([
-        './src/components/stateful-counter.tsx',
-        './src/components/stateful-counter-with-default.tsx',
-      ]),
+      name: 'Class Components',
+      components: () => [
+        './src/components/class-counter.tsx',
+        './src/components/class-counter-with-default-props.tsx',
+      ],
     },
     {
       name: 'Generic Components',
-      components: () => ([
-        './src/components/generic-list.tsx',
-      ]),
+      components: () => ['./src/components/generic-list.tsx'],
     },
     {
       name: 'Render Props',
-      components: () => ([
+      components: () => [
         './src/components/name-provider.tsx',
         './src/components/mouse-provider.tsx',
-      ]),
+      ],
     },
   ],
   theme: {
@@ -48,18 +46,20 @@ module.exports = {
   },
   propsParser: require('react-docgen-typescript').parse,
   webpackConfig: webpackConfig,
-  updateExample: function (props, exampleFilePath) {
+  updateExample: function(props, exampleFilePath) {
     if (typeof props.settings.filePath === 'string') {
-      const { settings: { filePath } } = props;
+      const {
+        settings: { filePath },
+      } = props;
       delete props.settings.filePath;
 
       props.content = fs.readFileSync(
         path.resolve(exampleFilePath, '..', filePath),
         { encoding: 'utf-8' }
       );
-      props.settings.static = true
+      props.settings.static = true;
     }
 
-    return props
-  }
-}
+    return props;
+  },
+};