This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"lastUpload":"2021-11-07T23:14:05.536Z","extensionVersion":"v3.4.3"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { UserContextProvider } from "~hooks/useUserContext"; | |
import UserInfo from "./UserInfo"; | |
export default function App() { | |
return ( | |
<UserContextProvider value="John"> | |
<UserInfo /> | |
</UserContextProvider> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useContext, createContext } from "react"; | |
// Nosso contexto | |
const UserContext = createContext({ name: "" }); | |
// Componente que recebe e atualiza o valor de name | |
export function UserContextProvider({ name, children }) { | |
return <UserContext.Provider value={name}>{children}</UserContext.Provider>; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import useUserContext from "~hooks/useUserContext"; | |
export default function UserInfo() { | |
const userName = useUserContext(); // Inicialmente será '' e logo em seguida 'John'. | |
return <p>Olá, {userName}</p>; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useRef, useEffect } from "react"; | |
export default function Component() { | |
const textRef = useRef(null); | |
useEffect(() => { | |
// Get element width | |
console.log(textRef.current.offsetWidth); | |
}, []) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 === 1; // true; | |
"batman" === "batman"; // true; | |
false === false; // true; | |
{} === {}; // false; | |
[] === []; // false; | |
() => {} === () => {}; //false; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useImperativeHandle, forwardRef, useEffect, useRef } from "react"; | |
const Input = forwardRef((props, parentRef) => { | |
const childRef = useRef(); | |
const someMethod = () => 1; | |
useImperativeHandle(parentRef, () => ({ | |
focusOnChildInput: () => childRef.current.focus(), | |
callChildMethod: someMethod, | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useDebugValue, useState } from "react"; | |
function useUserStatus() { | |
const [isLogged, setIsLogged] = useState(false); | |
// ... | |
// Mostra um `label` no DevTools ao lado desse hook | |
useDebugValue(isLogged ? "Logged" : "Not logged"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useLayoutEffect } from "react"; | |
function Component() { | |
const [isDOMLoaded, setIsDOMLoaded] = useState(false); | |
useLayoutEffect(() => { | |
setIsDOMLoaded(true); | |
window.localstorage.getItem("..."); | |
}, []); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { memo, useCallback } from "react"; | |
function ListItem({ item, onSelect }) { | |
return ( | |
<li> | |
<button onClick={() => onSelect(item)}>Select {item}</button> | |
</li> | |
); | |
} |
NewerOlder