Exemplos de código para o artigo "React Hooks — Um 'Breve' Resumo"

App.js

// App.js
import React, { useState, useEffect } from "react";
import useWindowWidth from "./useWindowWidth";

export default App = (props) => {
  const [isMobile, setIsMobile] = useState(false);
  const width = useWindowWidth();

  useEffect(() => {
    setIsMobile(width <= 500);
  }, [width]);

  return <span>{isMobile ? "MOBILE" : "DESKTOP"}</span>;
};

ClassComponentLifeCycleExample.js

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      person: "TheAlfadur"
    };
  }

  componentDidMount() {
    console.log(this.state.count);
    console.log(this.state.person);
  }

  componentDidUpdate() {
    console.log(this.state.count);
    console.log(this.state.person);
  }

  render() {
    return (
      <>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          INCREMENTAR O CONTADOR
        </button>
        <button
          onClick={() =>
            this.setState({
              person:
                this.state.person === "TheAlfadur" ? "Diego" : "TheAlfadur"
            })
          }
        >
          ALTERAR PESSOA
        </button>
      </>
    );
  }
}

ClassComponentStateExample.js

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

UseEffectExemple.js

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

export default App = (props) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
    return () => {
      console.log(`Componente desmontado. ${count}`);
    };
  });
  
  return <button onClick={() => setCount(count + 1)}>SOMAR</button>;
};

UseEffectExemple2.js

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

export default App = (props) => {
  const [person, setPerson] = useState("TheAlfadur");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  useEffect(() => {
    console.log(person);
  }, [person]);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        INCREMENTAR O CONTADOR
      </button>
      <button
        onClick={() =>
          setPerson(person === "TheAlfadur" ? "Diego" : "TheAlfadur")
        }
      >
        ALTERAR NOME
      </button>
    </>
  );
};

UseStateExample.js

import React, { useState } from "react";

export default App = (props) => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

UseStateExampleWithObject.js

import React, { useState } from "react";

export default App = (props) => {
  const p = { name: "Nome da pessoa", age: 24 };
  const [person, setPerson] = useState(p);
  return <span>{`${person.name} - ${person.age}`}</span>;
};

useWindowWidth.js

//useWindowWidth.js
import { useLayoutEffect, useState } from "react";

export default function useWindowSize() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const updateWidth = () => setWidth(window.innerWidth);

    window.addEventListener("resize", updateWidth);
    updateWidth();

    return () => window.removeEventListener("resize", updateWidth);
  }, []);

  return width;
}