├── .gitignore
├── README.md
├── package.json
├── public
├── React.svg.png
└── index.html
├── src
├── App.css
├── App.js
├── Components
│ ├── callback.js
│ ├── context.js
│ ├── debugValue.js
│ ├── effect.js
│ ├── imperativeHandle.js
│ ├── layoutEffect.js
│ ├── memo.js
│ ├── reducer.js
│ ├── ref.js
│ └── state.js
├── index.css
└── index.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Hooks
2 |
3 | Entendendo como funcionam alguns Hooks do React
4 |
5 |
6 | ### Como rodar o projeto:
7 |
8 | **Você pode clonar o projeto e rodá-lo localmente seguindo os passos abaixo**
9 |
10 | 1. `git clone https://github.com/rafaballerini/ReactHooks.git` para clonar o projeto
11 | 2. `yarn` para instalar as dependências do projeto
12 | 3. `yarn start`
13 | 4. Acessar [http://localhost:3000](http://localhost:3000) no navegador
14 |
15 | ### Como testar cada um dos hooks:
16 | 1. Abra o arquivo `App.js`. É possível perceber que existem várias linhas comentadas, tanto na parte de importações, quando dentro da função.
17 | 2. Descomente a importação referente ao hook que deseja testar e também a linha dentro da função (há outro comentário no final da linha indicando a qual hook ela pertence).
18 |
19 |
20 |
21 | ## Explicação de cada Hook:
22 |
23 | ### useState
24 | É uma função para controle de estado:
25 | - **recebe um parâmetro** (valor inicial desse estado)
26 | - **retorna uma lista com 2 variáveis** (a primeira é o valor do estado em si e a segunda é a função que atualiza esse estado)
27 |
28 | ```js
29 | const [state, setState] = useState(0);
30 | ```
31 |
32 | O `setState` será usado para atualizar os valores do estado, por exemplo:
33 |
34 | ```js
35 | function increment(){
36 | setState(state + 1)
37 | }
38 | ```
39 |
40 | ### useEffect
41 | - **recebe dois parâmetros:** uma função e uma lista de dependências. Quando algum elemento dessa lista for alterado, a função é executada automaticamente.
42 | - **o retorno da função pode ser uma função.** Se for, ela será executada quando o componente for desmontado
43 |
44 | ```js
45 | useEffect(() => {
46 | console.log(state)
47 | }, [state])
48 | ```
49 |
50 | Quando a lista de dependências estiver vazia, a função será executada no momento que o componente for renderizado.
51 | É executado de forma assíncrona depois de uma renderização na tela.
52 |
53 | ### useContext
54 | É uma forma de mais de um componente ter acesso a uma funcionalidade/lógica do programa.
55 | Pra isso é criado uma `const Context` usando o `React.createContext`.
56 |
57 | ```js
58 | const Context = createContext()
59 | ```
60 |
61 | Criamos um componente que será o provedor dos dados que tem no nosso context.
62 |
63 | ```js
64 | export function PageContextProvider({children}) {
65 | const [state, setState] = useState(0);
66 |
67 | const increment = useCallback(()=>{
68 | setState(state + 1)
69 | },[state])
70 |
71 | const decrement = useCallback(()=>{
72 | setState(state - 1)
73 | },[state])
74 |
75 | const handleChange = useCallback((event)=>{
76 | setState(Number(event.target.value))
77 | },[state])
78 |
79 | return (
80 |
86 | {children}
87 |
88 | )
89 | }
90 | ```
91 | Note que esse `Context.Provider` recebe a propriedade `children` e utiliza essa propriedade para representar todos os componentes.
92 |
93 | ```js
94 |
95 |
96 |
97 | ```
98 |
99 | `PageInputContext` é um componente filho de `PageContextProvider` e para acessar as propriedades que ele envia é preciso chamar o `useContext` passando como parâmetro o `Context`, criado com o `React.createContext`
100 |
101 | ```js
102 | export default function PageInputContext(){
103 | const {state, increment, decrement, handleChange} = useContext(Context)
104 | }
105 | ```
106 |
107 | ### useReducer
108 | No `useState` a lógica de atualização de dados fica dentro de onde ele foi chamado, já no `UseReducer` a lógica ficará em uma função, como essa `reducer` abaixo.
109 |
110 | ```js
111 | function reducer(state, action) {
112 | switch (action.type) {
113 | case "increment":
114 | return state + 1;
115 | case "decrement":
116 | return state - 1;
117 | default:
118 | return action.newState;
119 | }
120 | }
121 | ```
122 |
123 | - **recebe até 3 parâmetros:** o primeiro é a função que altera o estado, o segundo é o estado inicial e o terceiro é uma função init caso seja necessário executar alguma coisa no momento que o estado é criado
124 | - **retorna uma lista com 2 elementos:** o valor do estado em si e o dispatch, que é a forma como iremos chamar a função para atualizar o estado, ela que dispara a chamada da função reducer
125 |
126 | ```js
127 | const [state, dispatch] = useReducer(reducer, 0);
128 | ```
129 |
130 | Normalmente é melhor utilizar o `useReducer` quando se tem uma lógica complexa no state que envolve múltiplos subvalores ou quando o próximo state depende do anterior.
131 | Ele também permite otimizar performance para alguns componentes, pois você pode passar um `dispatch` ao invés de `callbacks`.
132 |
133 | ```js
134 |
2 |
3 | Entendendo como funcionam alguns Hooks do React
4 |