Introduction
React.js 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.
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.
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.
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.
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.
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
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.
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
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.
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
Top comments (0)