React.js -  Components
Tags: react, javascript
Published: 2021-03-12 16:59:10

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/my65z3danajbvj3zm2mh.png)

# Introduction
[React.js](https://reactjs.org/) is about building a **UI**. Every object or function in a **React.js** application contributes to the UI. In this article, I will explain the types of components used in React.js and possible use cases for each type.

# Component Scope
As long as **React** is within scope a JavaScript Function or ES6 JavaScript Class can be made into a React Component.
```jsx
import React from 'react';
```

# Components Types

### Functional
Functional components are functions that accept **props** as arguments and return valid **JSX**. Functional components are usually the preferred choice when building components with react because they require less overhead.
```jsx
import React from 'react';

function Todo(props){

    return (
      <div className="Todo">
        <h1>New Task: {props.task}</h1>
      </div>
    );
}

export default Todo;
```
**Use Case** - When you need a generic starting template for building a component.

### Component (React Class)
Class components in React.js inherit the Component constructor. They can initialize **state**, implement the **render** method and use **lifecycle** hooks.
```jsx
import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentWillMount() {}

  componentDidMount() {}

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;
```
**Use Case** - If the component will render to the DOM and requires full capability of react.

### Pure (React Class)
The difference between the Pure and Component class is the **render** method. A Pure component will not update the state if the values have not changed. 
```jsx
   import React, { PureComponent } from 'react';

    class Result extends PureComponent {
      render() {
        return <li>{this.props.result}</li>;
      }
    }

    export default Result;
```
**Use Case** - If you need to avoid consistent renders of the component.

### Stateful - (Containers, Smart)
Stateful components are components that manage the **state** of the component. The component may manage state by means of the `this.state` object or the `useState` hook. Stateful components are often referred to as *Container* or *Smart* components because the state is often connected to a live data source.
```jsx
import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
     text: 'Do Something',
     completed: false
    }
  }

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;
```
Another Example
```jsx
import React from 'react';
import { useState } from 'react'


function Todo(props){

  const [todo, setTodo] = useState({
    text: 'Do something',
    completed: false
    })
    return (
      <div className="Todo">
        <h1>New Task: {todo.text}</h1>
      </div>
    );
}

export default Todo;
```
**Use Case** - When you need to manage or update the state of a component.

### Stateless - (Presentational, Dumb)
Stateless components **do not** manage the state of a component. They are often referred to as *Presentational* or *Dumb* components because its only job is to provide a piece of the UI.
```jsx
import React from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

export default Todo
```
Another Example
```jsx
import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
export default TodoList
```
**Use Case** - If the component will be reused in different parts of the application and act as only as a view.

### Higher Order(HOC)
A higher order component is a function or component per se that takes a component as props and returns a new component. Its different from other components because it doesn't render any view to the DOM.
```jsx
import React from 'react';

const withClass = props => (
  <div className={props.classes}>{props.children}</div>
);

export default withClass;
``` 
**Use Case** - You want to add some additional features or styling to a component.


### Conclusion
These are the different types of components within React.js. The two most commonly used components used within development are *Class* and *Functional*. As always take care, and I hope this article helps you on the path to learning React.js