Informações do Context API do React

ContextAPI.md

Context API

Criação do contexto

import { createContext } from 'react';

const MyContext = createContext(/*valor se não tiver um provider*/);

export default MyContext;

Criando provider

import MyContext from './context/MyContext'

<MyContext.Provider value={/*valor a ser passado*/}>
  /*Componentes que receberão as informações do provider*/
</MyContext.Provider>

Criando consumer

(recebe como argumento uma função)

import MyContext from '../context/MyContext'

return(
  <MyContext.Consumer>
    {(value) => { /* value = valor recebido */
      /* renderiza algo utilizando o valor recebido do contexto */
     }}
  </MyContext.Consumer>
)

Context em classe

const MyContext = createContext();

class MyComponent extends React.Component {
  componentDidMount() {
    const value = this.context;
    // ...
  }

  render() {
    const value = this.context;
    // ...
  }
}

MyComponent.contextType = MyContext;

userEffect

• toda vez que o componente sofrer qualquer tipo de alteração e renderizar

    useEffect(() => {});

• similar ao componentDidMount

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

• semelhante ao componentDidUpdate e ele será executado sempre que houver mudança em alguma das variáveis especificadas.

    useEffect(() => {}, [variável1, variável2, ... variávelN]);

• pode agregar a utilização de um dos dois últimos exemplos, o componentDidMount ou componentDidUpdate dependendo do segundo parâmetro, e a função presente no retorno se comporta como componentWillUnmount

    useEffect(() => {

      return () => {}
    }, []);

Função assincrona ao montar a página usando useEfect:

    useEffect(() => {
      const funcAssincrona = async () => {
        const exemploDeFetch = await fetch().then();
      }
      funcAssincrona();
    }, []);