Examples- Quick Compare

Here’s an example of converting a functional component to a class so that it can be declared a PureComponent.

If this component were declared as a class from the start, the true intent of the commit would be crystal clear — it would require a 4 character change:

Conversion obscures the component’s history by creating the illusion that the component has been largely rewritten when in fact you may have made a very trivial change. The person who does the conversion will be “blamed” for writing many lines that they merely changed for conversion reasons.

3. Minor Signal to Noise Differences

Compare a minimal class to a function, and the differences are minor. Remember, constructors are optional without state.A class without default props is only 3 lines longer (due to explicit render and de-structuring on separate line). Without de-structuring a class is only 2 lines longer.

Correction: Oops! I forgot the functional style can be a one-liner with a simple arrow function:

const Hello = ({greeting, firstName}) => <div>{greeting} {firstName}</div>

4. Inconsistency

Function and class components look different. This inconsistency can slow developers down as they shift between the two styles.

• In classes, you say this.props, in functions, you say props.

• In classes, you declare a render function. In functions, you don’t.

• In classes, you destructure at the top of render. In functions, you destructure in the function’s argument list.

• In classes, you declare default props below the component (or via class properties if you’re willing to use a stage-3 feature). In functions, you declare default props using default arguments.

But who will win classes or Function we will see that ...