Functional Components and When to Use Them

First, what is a functional component. In React, a functional component is a component that is defined as a function, instead of as a class. The most basic of functional components looks something like this:

function exampleComponent () {
    return(
        <div>
            Hello world!
        </div>
    )
}

As you can see, unlike a class component it does not have a render method, in fact, as a function it doesn’t have any methods; the function just returns some JSX for us. In this case a div element is rendered with ‘Hello world!’ inside of it. This is pretty useless, so how do we get some use out of our component.

We pass in props. The props are passed to the component using the same syntax in the parent as if it were a class component. The props can then be accessed the same as arguments to any function.

function exampleComponent (props) {
    return(
        <div>
            Hello {props.name}!
        </div>
    )
}

We now know what a functional component is, when should we use one? Whenever we don’t need all of the abilities of a class component is the answer. So unless we need state, the store, dispatch functions or anything else we can ONLY get from class components we should use functional components. Functional components are simpler and therefore easier to write and debug.

In my recent application toxic-players(link) I used functional components to display players and their reports. The components of the players and reports were functional, and so were the lists containing them (note, not the container components those lists were in). The components did not need to change as the user interacted with them, except to appear and disappear. They have very little interaction with the store. The interaction that they did have with the store was handling by passing functions as props from a component that used the store more. Let’s look at my Player component:

export default function Player({player, store}) {
    return(
        <div className='player' style={{backgroundColor: `rgb(100, ${player.score * 5}, 255)`}}>
            <VotingButtons player={player} store={store}/>
            <h3>{player.username}</h3>
            <ReportContainer player={player} store={store}/>
        </div>
    )
}

The function returns a div element, with some things inside of it. Notably, one of those things is a ReportContainter component, which is a class component. By passing the store through our functional component to a class component we retain the use of it. This allows a lot of useful behavior, that I won’t get into now.

When we use functions to define our display components, they are more streamlined and often easier to understand at a glance. There is no looking around for a render method, we know that our JSX will be returned at the end of the function. We should use them whenever possible to minimize unnecessary complexity and eliminate as much bugginess as possible.