Class Component

Although creating a simple instance of the Component class is a quick and convenient way to get a component functioning, it does have its limitations. In most cases you will want to extend the Component class. In fact, it's best to always start by extending. That way, if you need to add more functionality as your project grows, it will be easy. A component instance is fast, but it will often happen that later you realize your component needs more features. Then you have to go through the hassle of converting an instance into an extension.

Advantages of Class Components

When you create a component by extend the Component class, your component has proper access to all your components properties and methods through the this keyword. You can also add methods for events directly to your component and access them everywhere through the this keyword. Extending the Component class gives you encapsulation of all the functionality your component might need.

If you want a custom component that you can reuse multiple times in the same app with different data, then you would need to extend. Below we are going to create a list component to create multiple lists with different datasets:

See the Pen Composi extending component-1 by Robert Biggs (@rbiggs) on CodePen.

In the above example, notice that we defined the render function as a method of the class. We also designated the component's container directly in the class constructor. Because of this, all instances of it will use the same container. If you wanted to render each list in a different container, then you would not bother assign the container in the constructor. Instead you'd pass it in during initialization:

See the Pen Composi extending component-2 by Robert Biggs (@rbiggs) on CodePen.

componentShouldUpdate

Sometimes you need to do some complex operations on data and you don't want the component to update constantly due to changes. Or you want to render a component with some external DOM plugin, possibly jQuery. For these situations you can use the comonentShouldUpdate property inside the class constructor. By default it is set to true. Setting it to false causes a component to render only once, during the mount. Even though the update function is invoked on it, or its state changes, it will not update.

You can make the component react to updates again by setting this property back to true on the component instance.

When you set comonentShouldUpdate back to true, nothing will happen until either the state changes or you invoke the component's update() method.

class Hello extends Component {
  constructor(props) {
    super(props)
    this.container = 'header',
    this.state = 'World'
    this.componentShouldUpdate = false
  }
  render(data) => {
    return (
      <h1>Hello, {data ? `: ${data}`: ''}!</h1>
    )
  }
}
// Create instance of Hello:
const hello = new Hello()

// Some time later update the component's state:
hello.setState('Joe')
// Because componentShouldUpdate is false, the component will not update.

// Some time later set componentShouldUpdate to true:
hello.componentShouldUpdate = true 
// Now the component will update:
hello.setState('Joe')