×

Everything About React Functional Components

Shailendra Chauhan  Print   21 min read  
03 Sep 2021
 
Advanced
237 Views

When you are working in React, you will frequently come across functional components. They are the common components widely used in React. They are JavaScript/ES6 functions. You can easily create a functional component to React after writing a JavaScript function. Every time, these functions may not receive data in the form of parameters. The return value in the functional components is the JSX code useful to render to the DOM tree.

You can use the React functional components as the status quo of writing contemporary React applications. There were several React Component Types prevalent in the past. However, with the inception of React Hooks, it is now possible to write your entire application through just functions as React components. A functional component in React always begins with a capital letter. Moreover, it takes props as a parameter if needed.

An example of a valid functional component in React is:

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

The course of react js certificationg includes the learning of Functional component React. You may also find some of its components when you go through a React tutorial.

Now let’s go through some of the commonly used functional components in React:

Props -React Functional Component:

Props are read-only and are received from a parent component. In React, props are widely utilized to pass information from one component to another. Moreover, they are passed down the component tree:

It is important to know what the components in React render. Whenever rendering a component, you can pass props to the component, in form of HTML attributes. Subsequently, in the Function Component, the props object is presented as an argument within the function signature.

Props always come as objects, and frequently, you have to extract the info from the props anyway. Therefore, the JavaScript object destructuring proves to be useful. Furthermore, you can directly incorporate it within the function signature for the props object. It is vital to be familiar with Props when you plan to Learn Reactjs Step By Step.

React Arrow Function Component:

The inception of JavaScript ES6 give rise inclusion of new coding concepts in JavaScript and React. For example, a JavaScript function can be represented as lambda (arrow function). Therefore, a Function Component is occasionally regarded as Arrow Function Components (or Lambda Function Component). 

Whenever using arrow functions for the React components, there are no changes for the props. They can still be accessed as arguments just like before. Alternatively, Arrow is a React Function Component in which the ES6 Functions are represented as arrows instead of ES5 functions. Generally, the ES5 functions are the default manner of representing functions in JS.

Stateless React Function Component:

The components discussed above can be called Stateless functional components. They simply receive input in form of props and return output in form of JSX: (props) => JSX. If the input is only available as props, it defines the rendered output. Such types of components don’t deal with state and don’t show any side effects. You will not find a side effect like retrieving the browser's local storage. The reason why they are called the Functional Stateless Components is they are stateless and denoted by a function. But, with the React Hooks, the state is now available in the Function Components. The same is discussed below.

React Function Component: State

It is possible to use state and the side-effects in Function Components with the React Hooks. To understand it, can assume that there is the transfer of all logic to our other Function Component and there is no passing of props to it.

Without a state, it is impossible to interact with the application. Also, without a state, you cannot change the greeting variable. With the use of React Hooks, the State React Functional Component makes React interactive and fascinating.  You may need basic knowledge on state and stateless React function components when you are preparing for React Interview Questions and Answers.

Event Handler -React Function Component:

Event Handlers in React. How to determine what action will be… | by Technical Geek | JavaScript in Plain English

One of the most common event handlers in React is onChange.  It is used in the input field to keep you notified whenever the internal value of the input field changes. Some other prevalent event handlers are onMouseDown, onClick, and onBlur.

To define the function within the component, you can use an arrow function or class method. It is allowed to either create or add multiple Functional Components as you like to either work as explicit event handlers or summarize other business logic.

The above diagram shows that the app builds React Virtual DOM which in turn builds the DOM.  As a response, the DOM delivers events to React Virtual DOM which in turn delivers events to the app. So, the event handling is smooth and perfect.

Callback Function -React Function Component:

Callback functions in React. It had been a while since I built… | by Jason Arnold | Medium

There are no props passed to Child Function Component. The question that arises is whether it is allowed to pass a function to a component as a prop too or not. The answer is it can be managed to call a component function from the outside. This can be done by passing a function to a Child Component and then handle everything that takes place in the Parent Component. Also, you can execute certain functions between the Child Component for the onChangeHeadline function. This helps you to add extra functionality within the Child Component. In this way, you can call a Child Component's function directly from a Parent component.

Lifecycle -React Function Component: 

For those who earlier used the React Class Components, they may be familiar with the lifecycle methods namely componentWillUnmount, componentDidMount, and shouldComponentUpdate. These methods are not accessible in the Function Components, so it is now interesting to see how they can be implemented.

Keep in mind that there is no constructor in a Function Component. Typically, the constructor is used within a React Class Component for assigning the initial state. It is not required in a Function Component since you can assign the initial state with the useState hook as well as set up functions inside the Function Component for business logic.

Export and Import -React Function Component: 

Typically, you will observe Export and Import functions separately in their own files. Because React Components are classes or functions, you can utilize the standard import & export statements presented by JavaScript. It is possible to define and export a component in one file and then import it into another file.  If the component name is not significant to you, you can let it stay as Anonymous Function Component while using a default export within the React Function Component.

Pure React Function Component:

React Class Components provide you with the ability to determine whether a component needs to be rerendered or not. The same was made possible with the PureComponent or shouldComponentUpdate by avoiding rerenders. As a result, they prevent performance congestion.

With the Pure React Function Component, whenever you type anything in the input field, the App component would update its state, rerenders, and also re-renders the Count component.

TypeScript -React Function Component: 

When you are searching for a type system for your React application, you can try out TypeScript for React Components.  TypeScript offers plenty of benefits to a developer. For example, it provides IDE support and can make the code base robust.

PropTypes -React Function Component: 

After you have defined your component, just assign it PropTypes to confirm the incoming props of a particular component. You can use the PropTypes for Function Components and React Class Components identically.

Also, Read -

1. Components of react-native elements

2. Various methods in async storage react native

3. Things you need to know about react navigation

4. Top 5 React developer tools for software development

Share Article

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Training Schedules
+91 9999123502
Accept cookies & close this