What-Why-How React Function Components

What are React Function Components?

Intro

In simplest terms: React Function Components are JavaScript functions which can take inputs, and return outputs consisting of HTML elements and/or other React components.

A component is conveniently used similarly to HTML tags, like this:

<MyComponent> Hello World! </MyComponent>

or simply

<MyComponent/>

(if you’re familiar with React class components, you’ll see function components are used the same way!)

Components can import CSS styles, access any JavaScript features like window, localStorage, and the rest of the standard JS library, and make use of JavaScript dependencies through imports.

Component Design Patterns

Basic components should be broken down bits of UI, and parent components can put multiple components together to make more useful sections of UI.

For example, if you’re designing a comments section on a social media app, a comment could be one component, responsible for rendering one commenter’s username, profile picture, and the comment text. One component could be responsible for creating a list of comment components, one component instance for each comment.

For more information on component design patterns, I recommend this article from Brad Frost on atomic design patterns: http://bradfrost.com/blog/post/atomic-web-design/

Why use Function Components?

Encapsulation and Re-usability

First, let’s address the purpose of using components at all, class or function.

Component-based design simplifies creation of websites/apps. Components often encapsulate complexity, which means that they contain the logic they use and return something simple, so the rest of your site/app doesn’t worry about the logic.

Components can be thought of like a secret toy factory: we input raw materials, some processes hidden inside the factory use the raw materials to create the finished product, and the finished product is then shipped out of the factory. The factory can be reused with more raw materials to create as many toys as needed, all of the same structure but with different properties.

In the case of <Comment>, the factory would take in comment data such as username, comment text, etc., process it by getting images and formatting the text, and then ship it out by returning HTML. The factory can be reused with more raw data to create as many comments as needed, all of the same structure but with different comment text, different username, etc.

This is encapsulation: when the factory ‘ships out’ the finished product to the comment list component, the comment list doesn’t care how the comment was created inside the factory.

Components also make logic truly reusable. You can create 10,000 <Comment> components, with any data you want to input. Creating the comment component allows you to reuse the encapsulated logic (factory behavior) without rewriting it.

State Management

The most important feature of React components is the ability to manage state. State is information a React component stores about itself. For example, a dropdown component (React component used to display a dropdown menu) might store open as part of its state, indicating whether the dropdown is open or closed. A component state can contain as much information as the developer needs.

Changing the state of a React component causes the component to re-render. If you programmatically change a dropdown open state from true to false, the component will “refresh” itself and can render different HTML based on the new state.

More examples of state could be the time on a clock, whether a button is enabled or disabled, the # of times a user has clicked on a button, or any other information a component needs to store and update about itself.

Each React component instance manages its own state. If I make two dropdowns from the same reusable React component, they each maintain their own open state separately from each other.

Why use function components over class components?

If you’re familiar with React and class components, you may wonder why you should begin using function components.

1. Function components are simpler to write, usually resulting in a smaller codebase. They aren’t bloated by ES6 class syntax.
2. Function components are frequently easier for developers to understand. Of course this is a matter of preference, but many JS developers have little experience with Object-Oriented Programming, so using classes can be a big adjustment.
3. The React team has stated that function components may eventually receive updates to make them perform better than class components. In big projects, even the smallest performance boost can make a huge difference!
4. The Big One: Function components can use React Hooks. Hooks are a major React feature released in React 16.8 in February 2019. They allow logic to be reused across function components, a difficult pattern to achieve with class components. They also grant function components almost all of the abilities of class components, like state management and lifecycle methods.

How do we program Function Components?

Function components are programmed exactly like JavaScript functions, except that they import React and can return JSX (JavaScript XML markup).

A simple component to return a line of text could look like this:

import React from 'react'
function TextLine() {
    return (
        <p>Hello World!</p>
    )
}

Most developers using function components are using ES6 syntax for functions, like this:

import React from 'react'
const TextLine = () => {
    return (
        <p>Hello World!</p>
    )
}

Since this component doesn’t have any logic inside of it (it just goes straight to return) it could be written like this:

import React from 'react'
const TextLine = () => (
    <p>Hello World!</p>
)

If we wanted to include a variable, we could write it like this:

import React from 'react'
const TextLine = () => {
    var count = 2;
    count++;
    return (
        <p>The variable count is {count}</p>
    )
}

Function components can have inner functions as well, like this:

import React from 'react'
const AcButton = () => {
    var count = 2;
    count++;
    const logCount = numToLog => {
        console.log(numToLog)
    }
    return (
        <button onClick={numToLog(count)} />
    )
}

Function components can return multiple HTML elements by wrapping them in a <div> or React fragment like this:

import React from 'react'
const TextLines = () => {
    return (
        <>
            <h1>Hello</h1>
            <p>World</p>        
        </>
    )
}

Components can take input in the form of props, like this:

import React from 'react'
const TextLine = props => {
    return (
        <p>{props.text}</p>
    )
}
-----------------
To use component with props:
<TextLine text="This is a prop example!"/>

Most props are used similarly to HTML attributes (like href on an <a> tag). However, props also grant access to nested children using the reserved .children property like this:

import React from 'react'
const TextLine = props => {
    return (
        <p>{props.children}</p>
    )
}
-----------------
To use component with children prop:
<TextLine> This is a prop example! </TextLine>

The word props itself can be changed to any variable name, but it is the standardized, global best practice for React and should almost always be adhered to.

Conclusion

This article of What-Why-How Programming covered an introduction to React function components. For more info, check out the React documentation, and there are plenty of other resources you can find through searching.

Next time, I’ll introduce React Hooks.