isacjunior

// Response da query acima
{
  "data": {
    "people": {
      "name": "Luke Skywalker"
    }
  }
}

isacjunior

# Query que consulta um personagem com id 1
query {
  people(id: "1") {
    name
  }
}

isacjunior

type People {
  name: String,
  height: String,
  mass: String,
  hair_color: String,
  skin_color: String,
  eye_color: String,
  birth_year: String,
  gender: String,
  homeworld: String,

isacjunior

import React from 'react'

interface Props {
  counter: number
}

function Counter({ counter }: Props) {
  return <p>{counter}</p>
}

isacjunior

import React, { useEffect } from 'react'

function WillUnmount() {
  useEffect(() => {
    console.log('Eu estou montado')
    return () => {
      console.log('Vou desmontar')
    }
  }, [])

isacjunior

import React, { Component } from 'react'

class WillUnmount extends Component {
  componentDidMount() {
    console.log('Eu estou montado')
  }

  componentWillUnmount() {
    console.log('Vou desmontar')
  }

isacjunior

import React, { useEffect, useState } from 'react'

function DidUpdate() {
  const [name, setName] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)

  useEffect(() => {
    console.log('Eu estou montado ou sofri alteração')
  }, [name])

isacjunior

import React, { Component } from 'react'

interface State {
  name: string
}

class DidUpdate extends Component<{}, State> {
  state = {
    name: ''
  }

isacjunior

import React, { useState } from 'react'

interface Props {
  initialState: number,
  step: number
}

function useCounter({ initialState, step }: Props) {
  const [count, setCount] = useState(initialState)
  const increment = () => setCount(count + step)

isacjunior

// componentDidMount com hooks
import React, { useEffect } from 'react'

function DidMount() {
  useEffect(() => console.log('Eu estou montado'), [])
  return <>content</>
}

export default DidMount