# Examples- Quick Compare

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

![](https://cdn-media-1.freecodecamp.org/images/kr8yw-al2gMvnamZWpuMG00mWGmIm21JDvEi)

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:

![](https://cdn-media-1.freecodecamp.org/images/BWwVp-yUaTzkyCFeeePwUz7hyic9wBl5k2nC)

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.

![](https://cdn-media-1.freecodecamp.org/images/ulQNa8UZO1XBVhrV-uCOiWvSBfxx2r9DHVWf)

**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](https://tc39.github.io/proposal-class-fields/)). In functions, you declare default props using default arguments.

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