megatroom

export default function LastConversions({ env }) {
  const [conversions, setConversions] = useState([])
  const listSize = conversions.length

  // ... business logic

  return (
    <Fade in>
      <Section>
        <Heading>{t('LastConversions.header')}</Heading>

megatroom

export default function Dashboard() {
  return (
    <GridContainer>
      <Funnel />
      <LastConversions />
      <TwoColumnSection>
        <LastLandingPages />
        <LastEmailCampaign />
      </TwoColumnSection>
      <MostViewedPages />

megatroom

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

const Logger = ({ index, getCounter }) => {
  const [text, setText] = useState("");

  useEffect(() => {
    const newText = `Contador ${index}: ${getCounter()}`;
    setText(newText);
    console.log(newText);
  }, [index, getCounter]);

megatroom

const Logger = ({ index, getCounter }) => {
  const [text, setText] = useState("");

  // Executa a função para obter o contador
  const counter = getCounter();
  
  useEffect(() => {
    // usa o contador dentro do callback
    const newText = `Contador ${index}: ${counter}`;
    setText(newText);

megatroom

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

const Logger = ({ index, getCounter }) => {
  const [text, setText] = useState("");

  useEffect(() => {
    const newText = `Contador ${index}: ${getCounter()}`;
    setText(newText);
    console.log(newText);
  }, [index, getCounter]);

megatroom

const FunctionComponent = () => {
  // Função aninhada
  const myNestedFunction = () => {};

  return <h1>Estou sendo renderizado</h1>;
};

class ClassComponent extends React.Component {
  render() {
    // Função aninhada

megatroom

const functionA = () => {};
const functionB = () => {};
const copyFromB = functionB;

functionA === functionA // true
functionB === functionB // true

functionB === copyFromB // true
functionB == copyFromB // true
Object.is(functionB, copyFromB) // true

megatroom

// Try-catch com a declaração obrigatória do erro
function tryToParseJSON(jsonString)
  try {
    return JSON.parse(jsonString);
  } catch (unused) {
    return false;
  }
}

// Proposta com a declaração opcional do erro

megatroom

// message, body e user devem estar definidos para que este código não quebre
const name = message.body.user.firstName;

// atualmente precisamos fazer desta forma para nos proteger:
const name = message
  && message.body
  && message.body.user
  && mesage.body.user.firstName;

// ou com um valor padrão alternativo:

megatroom

import React from "react";
import { connect } from "react-redux";

import CourseList from "../../components/CourseList";
import Heading from "../../components/Heading";
import LeadMessage from "../../components/LeadMessage";

import { onGetCourses, onGetLectures } from "../../store/actions";

export class HomePage extends React.Component {