Top 10 Important Things In React That Every React Developer Must know
React is one of the top javascript libraries in the context of frontend development for building user interface or UI components. It's an open-source library and maintained by Facebook.
React is used for building a SPA (Single Page Application) or mobile application.
Today I am going to discuss the top 10 important things in React. This list I made is only my preference. It does not mean that there are not any other important parts in it. Of course, it may be but the most important things come to me that I will show you here.
Let’s get started!
1. The Component Lifecycle
Component lifecycle in React and its method are absolutely essential part of developing practice in react.
There are three phases in each of the react component lifecycle such as:
- Mounting — creating an instance of a component and inserting a class component into the DOM.
- Updating - calling the methods, re-rendering the component, and updating the component in the DOM.
- Unmounting - calling a method and removing the component from the DOM.
For example;
// For example of any api
const url = 'http://api.com'componentDidMount() {
fetch(url)
.then(res => {
// Handling response
})
}
Here componentDidMount()is a good example of a lifecycle method. It runs when the component is mounted then rendered to DOM. This request is handled asynchronously.
When updating occurs, the componentDidUpdate() method is called then. Look and see the HTTP requests in the above example.
Now for updating the component you have to call methods in the following order when the component is being re-rendered:
- Calling
setState()in thecomponentDidUpdate()method - Updating the component
- Invoking
componentDidUpdate() - Calling
setState()again …
componentDidUpdate(prevProps, prevState) {
// Comparing props or state
if (this.props.counter !== prevProps.counter) { this.postCounter(this.props.counter);
}
}
And when a component is needed to be removed from the DOM, the componentWillUnmount() the method is called.
componentWillUnmount() {
document.removeEventListener("click", this.myFunction);
}2. Hooks
Hooks are a new feature in React 16.8. You can use state and other React features without using a class.
The most two usages of hooks are state and effect.
useState is a hook that returns a pair as the current state value and a function that lets you update it.
For example,
import React, { useState } from 'react';function loginStates(login) {
const [user, setUser] = useState(true);
const [admin, setAdmin] = useState(false); if (login === 'admin') {
setUser(false);
setAdmin(true);
}
}loginStates(user);
// state is not updated because it has true value by defalutloginStates(admin);
// admin and user both states are updated through if condition
Another example of useEffect hooks.
import React, { useState, useEffect } from 'react';function clapping() {
const [clap, setClap] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clapped ${clap} times`;
});
return (
<div>
<p>You clapped {clap} times</p>
<button onClick={() => setClap(clap + 1)}>
Clap more
</button>
</div>
);
}
By default, the component is rendered for the first time and whenever hooks are updated, the component re-render automatically.
If you can use any dependency on useEffect, it runs relying on the dependencies. For example,
useEffect(() => {
// Update the document title using the browser API
document.title = `You clapped ${clap} times`;
}, []);
// [] means that only one render occures for the first time when starting and vice-versa.3. PropTypes
PropTypes is a runtime type checking for React props and similar objects on it. It’s always best practice to validate the data you are getting through props by using react PropTypes.
There are many different validators according to the docs. Please look at this for details.
Let’s see an example of using it.
import PropTypes from 'prop-types';const Layout = ({ children }) => {
return (
<Header />
<main>{children}</main>
<Footer />
)
}Layout.propTypes = {
children: PropTypes.node.isRequired,
}
Here we can check the validation whether children is node type or not and also is a required type.
Let’s see another example of PropsTypes
import PropTypes from 'prop-types';const Greeting = (props) => {
return (
<h1>Hello, {props.name}</h1>
)
}Greeting.propTypes = {
name: PropTypes.string
};
In this way, you can check any other types such as an array, boolean, number, string, object, symbol, and so on.
4. DefaultProps
According to the ES6 class syntax, you can set default props to the component class by adding a static property named defaultProps. It is used mostly for the theming and default designing concept. When any new design is needed, a new design is overridden to this.
I will show you my real-life example. Look at below:
In the Button component, I used some design by default that is applied to the whole application when Button the component is rendered
const Button = ({ title, link, color, bgColor }) => {
return (
<Link
style={{
color,
backgroundColor: bgColor,
}}
to={link}
>
{title}
</Link>
)
}Button.defaultProps = {
title: "Button",
link: "https://mdmostafa.com",
color: "rgba(255, 255, 255, 0.85)",
bgColor: "transparent"
} export { Button }
The default value is set by defaultProps but it will be changed if the prop property is passed. Otherwise, the default value is executed.
5. React Fragment
The fragment is a common pattern in React to return multiple elements. It makes us group a list of children without adding extra nodes to the DOM.
Let’s see a normal example at first,
class Table extends React.Component {
render() {
return (
<div>
<h2> This is table </h2>
<table>
<tr>
<Columns />
</tr>
</table>
</div>
);
}
}Here, an extra node is used that is actually not necessary to solve this problem, you can use a fragment like this;
class Table extends React.Component {
render() {
return (
<React.Fragment>
<h2> This is table </h2>
<table>
<tr>
<Columns />
</tr>
</table>
</React.Fragment>
);
}
}<React.Fragment/> does not create any extra node to the DOM. Here’s more easy syntax, called short syntax<> … </> instead of it <React.Fragment/> .
return (
<>
<h2> This is table </h2>
<table>
// Another code here...
</table>
</>
);That’s all about the react fragment as well.
6. Higher-Order Component
A higher-order component takes a component itself and returns a new component. A higher-order component (HOC) is the advanced feature in React regarding reusing component logic.
When you pass any component itself as a props and it is used in return for that component is the practical usage of HOC.
import React from 'react';// Take in a component as argument WrappedComponentconst higherOrderComponent = (InnerComponent) => { // And return another component
const (HOC) => {
return <InnerComponent />;
} return HOC;
};
Here we can see that higherOrderComponent grab theInnerComponent and returns another component inside of it. It’s the actual benefit of reusing any component indeed.
7. Stateless component
There are basically two types of components as a stateful component and a stateless component. A stateful component is called a class component in which this, state, super() are used. The state is initialized in the constructor.
On the other hand, the stateless component has lots of advantages as like they are easy to write, understand, and test, and you can avoid the this keyword altogether.
Here’s the basic example of a stateless component.
function Greetings(props) {
return <h1>Hi, {props.name}</h1>;
}
function App() {
return (
<>
<Greetings name="Mostafa" />
<Greetings name="Mahmud" />
<Greetings name="Shams" />
</>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);8. JSX
JSX stands for JavaScript XML. This amazing syntactic sugar syntax is neither a string nor HTML. It's a syntax extension to JavaScript although it looks like HTML sometimes.
It's usages I have shown already above some examples.
const element = (
// JSX examples
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);9. Rendering virtual DOM
It will be discussed soon
10. Conditional Rendering
When we need to make a decision whether a component is to be rendered or not, we use conditional rendering. It provides us true or false return value based on we render a component or not.
Nowadays short circuits, logical operators, the ternary operator are used mostly for conditional rendering.
function userLogin(props) {
const user = props.user;
return (
<div>
{
user.length > 0 &&
<h2> Welcome {user}. </h2>
}
</div>
);
}That’s all about the important features in React practically.
Thank you for your time!
