ReactJS Functional Components are the primary approach of writing React components. This has largely been due to the introduction of React Hooks. At one point, these components were also named as dumb components because they could not handle state.
However, in my opinion, for a good separation of concern, it is still beneficial to evaluate when to use a Functional Component.
1 – What is a ReactJS Functional Component?
The beauty of Functional Components are that they look just like normal javascript functions.
Let’s look at a very simple functional component.
import React from 'react';
function App() {
const welcomeMessage = "Welcome to my first functional component!"
return <h1>{welcomeMessage}</h1>
}
export default App;
That’s basically a functional component!
In other words, it is essentially a Javascript function that returns JSX. If you don’t know much about JSX, don’t worry. It is simply the React way of mixing HTML with Javascript. In the above example, the variable welcomeMessage is a Javascript variable. We refer to it in our HTML code using curly braces.
The main difference between this and normal class-based component is the absence of state and life-cycle methods. Due to this, these components are also known as stateless components.
2 – Handling Props in ReactJS Functional Components
The above component does not handle props. However, in real life applications, you build applications using several components. And usually, parent components or components that appear higher in the hierarchy pass props to their child components.
In other words, you have to pass props from one component to another. Also, we always pass props down the component tree.
See below code snippet to understand how we do it.
import React from 'react';
function App() {
const welcomeMessage = "Welcome to my first functional component!"
return <WelcomeTitle welcomeMessage={welcomeMessage} />
}
function WelcomeTitle(props) {
return <h1>{props.welcomeMessage}</h1>
}
export default App;
So what’s happening in the above example?
Basically, we define another Functional Component known as WelcomeTitle. This component takes props as input. It simply returns some HTML where we pass the props.welcomeMessage attribute. In other words, props is an object with various attributes.
So where does the welcomeMessage property gets added to the props object?
That happens in the App component. In the App component, we declare our welcomeMessage. We then use JSX to return the WelcomeTitle component. While calling the WelcomeTitle component, we pass attributes. In this case, we pass an attribute known as welcomeMessage. That attribute then gets available to us in the props object of the WelcomeTitle component.
And this is how we basically chain components in React and pass props through the component tree.
3 – Using Object Destructuring While Passing Props
There is another cool approach that helps us write clearer React components. This approach is by using Object Destructuring.
See below:
import React from 'react';
function App() {
const welcomeMessage = "Welcome to my first functional component!"
return <WelcomeTitle welcomeMessage={welcomeMessage} />
}
function WelcomeTitle({ welcomeMessage }) {
return <h1>{welcomeMessage}</h1>
}
export default App;
Not much has changed here. Basically, we are simply using ES6 Object Destructuring to directly access the welcomeMessage property out of our Props object.
Most of the time, our interest in the Props object is with regards to its attributes. Therefore, we can use this technique to simply get a handle on the properties rather than using props explicitly.
4 – React Arrow Functional Component
ES6 brought a lot of new features to the world of Javascript. One of them was the arrow function.
Basically, we can now express functions as arrow functions in Javascript. Since our ReactJS Functional Components are also just functions, we can use arrow functions there as well.
Let’s see how in the below snippet.
import React from 'react';
const App = () => {
const welcomeMessage = "Welcome to my first functional component";
return <WelcomeTitle welcomeMessage={welcomeMessage} />
}
const WelcomeTitle = ({ welcomeMessage }) => {
return <h1>{welcomeMessage}</h1>
}
export default App;
Both of our Functional Components now use a function body. As you can see, things now look more concise now.
However, there is another small touch we can add to the above. Our second component i.e. the WelcomeTitle component has only one job. And that is to return the HTML. Therefore, we can make it even more compact as below:
const WelcomeTitle = ({ welcomeMessage }) => <h1>{welcomeMessage}</h1>
Basically, our function is now a simple one-liner in case that’s a good thing.
Conclusion
To summarize, ReactJS Functional Components help make our code simpler.
In case our components don’t need to manipulate state or lifecycle methods (though that’s possible now after React Hooks), functional components are the way to go.
Overall, functional components make our components more reusable across our application.
In a future post, we will look at how we can access state in a Functional Component using React Hooks.
If you have any comments or queries about this, please do sound off in the comments section below.
0 Comments