React Function Components

React Function Components are the equivalent of React Class Components but expressed as functions instead of classes. In the past, it wasn't possible to use state or side-effects in Function Components -- that's why they were called Functional Stateless Components -- but that's not the case anymore with React Hooks which rebranded them to Function Components.

React Hooks bring state and side-effects to React Function Components. React comes with a variety of built-in hooks, but also the ability to create custom hooks for yourself or others. Let's see how the previous React Class Component can be used as a React Function Component:

const App = () => {  
    const [value, setValue] = React.useState('');  
    const onChange = event => setValue(event.target.value);  
    
    return (    
        <div>      
            <h1>Hello React Function Component!</h1>      
            <input value={value} type="text" onChange={onChange} />      
            <p>{value}</p>    
        </div>  
    );
};

The previous code only shows the Function Component with the input field. Since component state is needed to capture the state of the input field's value, we are using the built-in React useState Hook.

React Hooks were also introduced to bring side-effects to Function Components. In general, the built-in React useEffect Hook is used to execute a function every time props or state of the component are changed:

const App = () => {  
    const [value, setValue] = React.useState(    
        localStorage.getItem('myValueInLocalStorage') || '',  
    );  
    
    React.useEffect(() => {    
        localStorage.setItem('myValueInLocalStorage', value);  
    }, [value]);  
    
    const onChange = event => setValue(event.target.value);  
    
    return (    
        <div>      
            <h1>Hello React Function Component!</h1>      
            <input value={value} type="text" onChange={onChange} />      
            <p>{value}</p>    
        </div>  
    );
};

The previous code shows a useEffect hook which is executed every time the value of the input field from the state changes. When the function given as side-effect to the useEffect hook gets executed, it updates the local storage's value with the recent value from the state. Also the initial state for the Function Component with the useState hook is read from the local storage.

Last but not least, we can extract both hooks as one encapsulated Custom Hook which makes sure to synchronize the component state with the local storage. In the end, it returns the necessary value and setter function to be used in the Function Component:

const useStateWithLocalStorage = localStorageKey => {  
    const [value, setValue] = React.useState(    
        localStorage.getItem(localStorageKey) || '',  
    );  
    
    React.useEffect(() => {    
        localStorage.setItem(localStorageKey, value);  
    }, [value]);  
    
    return [value, setValue];
};

const App = () => {  
    const [value, setValue] = useStateWithLocalStorage(    
        'myValueInLocalStorage',  
    );  
    
    const onChange = event => setValue(event.target.value);  
    
    return (    
        <div>      
            <h1>Hello React Function Component!</h1>      
            <input value={value} type="text" onChange={onChange} />      
            <p>{value}</p>    
        </div>  
    );
};

Since it is extracted from the Function Component, it can be used for any other component to share reusable business logic. It is an abstraction and advanced pattern in React equivalent to Mixins, Higher-Order Components, and Render Prop Components. However, it may be worth to mention that React Function Components can be enhanced by React's Higher-Order Components and Render Prop Components as well.

React Function Components with Hooks and React Class Components are the status quo for writing modern React applications. However, I strongly believe that React Function Components with Hooks will replace React Class Components in the future. From there, React Class Components may be only seen in older React applications/tutorials again similar to React createClass Components and React Mixins. The same applies to Higher-Order Components and Render Prop Components, which may be replaced by React Hooks to share reusable logic.

---

All React Components share the common sense of how to use React Props, because they are just used to pass information down the component tree. However, the usage of state and side-effects varies for React Class Components and React Function Components with lifecycle methods and hooks.

This guide has shown you all the different Types of React Components, how they are used, and how they are put into a historical context. All examples from the tutorial can be seen and tried out over here. In the end it's perfectly fine to use React Class Components, Function Components with Hooks, advanced concepts like Higher-Order Components and React Render Prop Components. However, it's good to know for older React applications/tutorials that there were other React Components and Patterns used in the past as well.