import { createContext } from 'react';
const MyContext = createContext(/*valor se não tiver um provider*/);
export default MyContext;
import MyContext from './context/MyContext'
<MyContext.Provider value={/*valor a ser passado*/}>
/*Componentes que receberão as informações do provider*/
</MyContext.Provider>
(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>
)
const MyContext = createContext();
class MyComponent extends React.Component {
componentDidMount() {
const value = this.context;
// ...
}
render() {
const value = this.context;
// ...
}
}
MyComponent.contextType = MyContext;
- 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
oucomponentDidUpdate
dependendo do segundo parâmetro, e a função presente no retorno se comporta comocomponentWillUnmount
useEffect(() => {
return () => {}
}, []);
useEffect(() => {
const funcAssincrona = async () => {
const exemploDeFetch = await fetch().then();
}
funcAssincrona();
}, []);