An Intro to React Functional Components
Introduction
React Components are the foundation upon which you build user interfaces (UI), according to the official React docs (the new ones). They are the core building blocks of react.
Through components, React lets you combine your markup (HTML or JSX), CSS and JavaScript logic into a cohesive code block that serves the same purpose as a JavaScript function, but works in isolation and returns HTML output. This shows that each React component encapsulates its own logic and functionality, making them independent.
It helps to think of React components as building blocks for a digital Lego set (this is not my own analogy, I just stumbled across it online and it made a lot of sense). Each component is like a unique Lego piece that serves a specific defined purpose. Just like how you can combine Lego pieces to create intricate structures and designs, you can combine React components to build dynamic and interactive user interfaces.
The use of components allows you to create modular and reusable code which is more maintainable and flexible. Components are the backbone of React, hence one cannot master React without truly understanding them.
This blog will mainly focus on the functional components and some of their introductory concepts.
Types of React Components
There are mainly 2 types of components in React, namely:
1. Class components
Class components involve the use of ES6 classes to create a react component. They all extend the Component class of React Js (“React.Component” class).
They are stateful and have access to React lifecycle methods. This means that they have dynamic and interactive behavior and also allow developers to perform actions at specific points in the component’s lifespan.
This are the main features that made them unique and far more superior than the functional components before React 16.8 (when hooks were introduced in functional components). They were actually the only way to create dynamic and reusable components.
2. Functional components
Functional components resemble JavaScript functions in that they receive props as parameters and return JSX as output.
Prior to the introduction of React hooks in React 16.8, they were considered stateless as they lacked built-in state management capabilities. However, with the introduction of React hooks, they can now have state and utilize other React features such as context, lifecycle methods, refs as well as handle side effects.
Functional components were sort of developed to phase out class components; The React team at Facebook has recommended the use of functional components with Hooks as the default approach for new projects.
However, it’s important to note that class components are not being deprecated and are still supported in React. This is to ensure functionality of legacy codebases and integration with third-party libraries that are yet to adopt functional components with hooks.
Creating functional components
Creating a functional component is quite easy. It’s similar to creating a JavaScript function with the exception that it should always return a JSX element.
The name of the component should always start with a capital letter as shown below:
function Hello() {
return <h1>Hello, World!.</h1>
}You can also use arrow function expressions. One rule to observe though, only a single JSX element can be returned even if it contains multiple nested elements within it.
const Hello = () => {
return (
<div>
<h1>Hello</h1>
<h2>World</h2>
</div>
)
}
export default Hello;To use functional components in other parts of an application they have to be exported.
Most of the times, it’ll be to the main component “App”. App is the root component provided by React and all other custom components you create are to be nested in it directly or indirectly. It acts like a container for other components and is used to render, update and manage the UI elements of the application.
import Hello from './Hello';const App = () => {
return (
<div>
<Hello />
</div>
)
}Just like regular JavaScript functions, functional components do take parameters but in the form of what we call “props”.
What are props?
Props (properties) are a way through which react components communicate with each other. They facilitate the passing of data from the parent component to it’s child components.
Props are immutable and read-only, meaning a child component cannot modify them directly. They are passed down in the form of an object of key-value pairs, where the key is the name of the prop and the value is the data being passed. The child component receives them in the form an object which has fields corresponding to the data being passed.
Here’s a simple illustration:
import React from 'react'
//parent element
const App = () => {
const name = 'World';
return (
<Hello name={name} />
)
}
//child element
const Hello = (props) => {
return(
<div>Hello {props.name}</div>
)
}Props can be used for various purposes such as passing data, event handlers, or functions between components.
State management in Functional components
State in react is the memory of a specific component. In other words, it is the ability of a react component to remember and hold data.
Functional components need to be dynamic. That’s where state management comes in. State management is the process of managing the data in react components.
This data is ever changing in most scenarios meaning local variables can’t simply cope. That’s why in functional components state is managed using the ‘useState’ hook.
useState hook
The useState hook provides a state variable to retain data between renders and also a state setter function to update the variable.
To use the useState hook, you need to import it from the ‘react’ library. Then, you can declare a state variable by calling the useState function and optionally pass an the initial value to set the initial state of the variable.
In this example, the state variable is named ‘count’ and its initial value is 0. The ‘setCount’ function is used to update the value of ‘count’ each time the button is pressed:
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increase = () => {
setCount(count + 1);
}
return(
<div>
<p>{count}</p>
<button onClick = {increase}>add</button>
</div>
)
}useState can be used to keep track of other data types; strings, numbers, booleans, arrays and even objects.
Conclusion
Overall, functional components are a powerful and efficient feature in React. They provide developers with a way of writing cleaner and more reusable code.
There is more to functional components than what I’ve discussed here. I have merely touched on the introductory basics, and I would advise you to consult additional resources online on the particular topic. A good place to start would be the React docs (Or YouTube). Happy Coding!
