Functional component in React explained with examples

We will take a look at functional component in React with examples in this article. Previously we have talked about components in React in previous articles . Therefor we want to a bit focus on functional component in React which are called stateless component.

Functional component in React explained

Generally functional component in React are called stateless components. The reason is they simply don’t need states.

Typically we well know that state should be defined inside a class component and in its constructor.

In a modern way though we are using ES6 default parameters without constructor to define states.

Therefor in a functional component in React we only use props. Besides we use the data received through props from the stateful component.

Practically a functional component is to build small chunks of code that are reusable and don’t need to react with state.

A functional component in React

Basically functional components are just React components that aren’t created as their own separate class. They look like this:

<em>// Class component
</em>class Parent extends React.Component {
 render () {
  return(
   <Child bg<em>Color</em>={'blue'} />
  )
 }
}
<em>// Functional component
</em>const Child = () => {
  return (
    <div></div>
  )
}

However to get access to the props via the functional component in React you should pass it in the function arguments.

Thankfully there is no nee to use the this keyword here. Because it is not a class component:

const Child = (props) => {
  return (
    <div style={{backgroundColor: props.bgColor}} />
  )
}

A stateless component(or dumb) is just presentation of the state(props). It only can render props and it should only do that. A good example is a button component: 

const Button = props => (
   <button className="our_button" onClick={props.onClick}>
      {props.label}
   </button>
);

Hence here you don’t need state. Because component creates a button and styles it and adds a click handler which we get its onClick method from the stateful component via props.

Another example with different syntaxes

Moreover this is another example of a parent class component and a child functional component in React. Although parent could use the createClass function or be extended from Component in React which is more modern :

const Username = React.createClass({
  render() {
    return <p>The logged in user is: {this.props.username}</p>;
  },
});
// OR:
class Username extends React.Component {
  render() {
    return <p>The logged in user is: {this.props.username}</p>;
  }
}

As an example wee could get the username via props in our functional component:

const Username = function(props) {
  return <p>The logged in user is: {props.username}</p>;
};

Alternatively which is a better way we could use destructuring in our function

const Username = ({ username }) => <p>The logged in user is: {username}</p>;

Therefor it looks much more cleaner and neater. Functional components have better performance than a class component. The only time you need to use a class component is if state is needed . Otherwise a functional component is the best option in any other case. Thanks for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.