Stateful and Stateless Components in React

What is a react component?

In React, components are super powerful HTML tags that are divided into independent and reusable parts. They interact with one another handling events and data. They accept inputs and return React elements detailing what the user interface should look like. A component can be used repeatedly in the user interface. They are divided into two categories stateful/class or stateless/functional. A stateful component also referred to as a smart component keeps track of changes to the data in a javascript object called a state. A stateless component also known as a dumb component just renders what is given to it by a javascript object called props without keeping track of changes.

Understanding Stateful components:

A Stateful component has a state and a life-cycle. A component's state is very similar to a locally declared variable in a javascript function. The state containing the properties of the component can only be modified inside of the component. The content of the state is changed by the components event handlers to trigger updates to the user interface. When the state's content changes the component re-renders. A life-cycle is a method that is called when a mount, update, unmount, or error handling phase occurs on the component. Keep in mind the minimal representation of a components state and utilize the render to return for any additional info. This will help to avoid repeating code. Avoid creating stateful components to avoid unnecessary complexity when it is possible.

//a React component declaration
class ExampleComponent extends React.Component {
  constructor(props){
    super(props);
    // the local state of the component
    this.state = {
      //components properties  
      location: 'local state',
    }
  }
  // render properties from the state
  render(){
    return 
      <div>This content is from the {this.state.location}!</div>
  }
}

Understanding Stateless Components:

Unlike a component's state, props give components the ability to receive data from a parent component when the content inside the component needs to be changed. Most components will receive props and render a React element. Props are used to configure the values passed into the component. Props should not change once they are set. Think of them as a javascript functions arguments that on invocation are sent into a function but in this case they are sent to component as attributes.

//a React stateless functional component
const ExampleComponent = (props) => {
  const alertLocation = (event) => {
    alert(`This content is from ${location}`);
  }
  // when the component is instantiated send the div to the html document
  return(
    <div><a href="#" onClick={alertLocation}>Location?</a></div>;
  )
}

Though props don't have a local state they can inherit state and life-cycle features using Hooks. Hooks are special functions that allow the use of state and other "hook into" React features instead of rewriting the component as a class.

//implement the use state method
import React, { useState } from 'react';
// functional component declaration
const ExampleComponent = () => {
  //set a variable to the useState function invocation
  const [location, setLocation] = useState('over there');
}

Conclusion

As a developer it is important to keep components stateless and reusable. Think of the stateful component as the tree and the stateless components as branches or variations of that tree. Reactjs.org says "A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way." Allowing React's declarative nature to take care of the complexity will create more cohesive projects. Explore the documentation and good luck on building your React application! Thank you for reading!

credits:

https://reactjs.org/docs/
https://www.reactenlightenment.com/basic-react-components/6.1.html
https://blog.logrocket.com/the-new-react-lifecycle-methods-in-plain-approachable-language-61a2105859f3/