Frontend Basic Principles Separate Data Presentation

Separate Data-Related Logic from Presentation Logic

When tasked with creating new functionality, consider the division of concerns between data management and the elements that will be shown on screen. Rather than having a single large component that handles everything, we want to write two different types of components:

1. Stateful "container" components that handle data loading and management
2. Stateless presentational components that render output based solely upon their props

Example

// This is where we would maintain state, make calls to the API or the Redux store, etc
const MyContainerComponent = () => {
  const [state, setState] = useState({foo: 'value1', bar: 'value2});

  return <PresentationalComponent foo={state.foo} bar={state.bar} />
}

// Given the same props, this component will always render the same output
const MyPresentationalComponent = ({foo, bar}) => {
  return (<div><h1>{foo}</h1><p>{bar}</p></div>);
}