Dicas rápidas - React para Iniciantes

Hoje vou apresentar um padrão que é bastante comum para quem usa react em suas aplicações. Estamos acostumados a misturar muitas coisas quando iniciamos em react e por vezes é só falta de maturidade. Quero apresentar hoje o padrão Presentational e Container components.

Componente de apresentação

O componente de apresentação (Presentational Component), nada mais é que um componente responsável pela parte de visualização(render), ele recebe dados advindos de outro componente(container do mesmo) e renderiza esses dados.

import React from "react";

const Presentational = ({ data }) => (
  <ol>
    {data.map((item) => (
      <li key={item.id}>
        <p>{item.name}</p>
      </li>
    ))}
  </ol>
);

export default Presentational;

Componente de container

É o "cabeça" da história, pois ele é o responsável pela lógica. Ele carrega os dados, trata do estado e passa os dados para o componente de apresentação.

import React, { useState, useEffect } from "react";

import Presentational from "./Presentational";

function Container() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  async function getData() {
    await fetch("https://jsonplaceholder.typicode.com/users")
      .then((resp) => resp.json())
      .then((json) => setData(json));
  }

  return (
    <div>
      <Presentational data={data} />
    </div>
  );
}

export default Container;

Para pensar: Se fôssemos pensar em MVC, o componente de apresentação seria a View e o componente container seria o Controller.

É isso! Até a próxima :) qualquer dúvida, sugestão ou crítica, é só comentar abaixo.