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 * as React from 'react' | |
import { useGetPokemonByNameQuery } from './services/pokemon' | |
export default function App() { | |
// Using a query hook automatically fetches data and returns query values | |
const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur') | |
// Individual hooks are also accessible under the generated endpoints: | |
// const { data, error, isLoading } = pokemonApi.endpoints.getPokemonByName.useQuery('bulbasaur') | |
// render UI based on data and loading state |
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 { configureStore } from '@reduxjs/toolkit' | |
// Or from '@reduxjs/toolkit/query/react' | |
import { setupListeners } from '@reduxjs/toolkit/query' | |
import { pokemonApi } from './services/pokemon' | |
export const store = configureStore({ | |
reducer: { | |
// Add the generated reducer as a specific top-level slice | |
[pokemonApi.reducerPath]: pokemonApi.reducer, | |
}, |
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 { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' | |
import type { Pokemon } from './types' | |
// Define a service using a base URL and expected endpoints | |
export const pokemonApi = createApi({ | |
reducerPath: 'pokemonApi', | |
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }), | |
endpoints: (builder) => ({ | |
getPokemonByName: builder.query<Pokemon, string>({ | |
query: (name) => `pokemon/${name}`, |
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
function SearchResults({ query }) { | |
const [page, setPage] = useState(1); | |
const params = new URLSearchParams({ query, page }); | |
const results = useData(`/api/search?${params}`); | |
function handleNextPageClick() { | |
setPage(page + 1); | |
} | |
// ... | |
} |
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
function SearchResults({ query }) { | |
const [results, setResults] = useState([]); | |
const [page, setPage] = useState(1); | |
useEffect(() => { | |
let ignore = false; | |
fetchResults(query, page).then(json => { | |
if (!ignore) { | |
setResults(json); | |
} | |
}); |
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
function subscribe(callback) { | |
window.addEventListener('online', callback); | |
window.addEventListener('offline', callback); | |
return () => { | |
window.removeEventListener('online', callback); | |
window.removeEventListener('offline', callback); | |
}; | |
} | |
function useOnlineStatus() { |
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
function Parent() { | |
const data = useSomeAPI(); | |
// ... | |
// ✅ Good: Passing data down to the child | |
return <Child data={data} />; | |
} | |
function Child({ data }) { | |
// ... | |
} |
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
// ✅ Also good: the component is fully controlled by its parent | |
function Toggle({ isOn, onChange }) { | |
function handleClick() { | |
onChange(!isOn); | |
} | |
function handleDragEnd(e) { | |
if (isCloserToRightEdge(e)) { | |
onChange(true); | |
} else { |
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
function Toggle({ onChange }) { | |
const [isOn, setIsOn] = useState(false); | |
function updateToggle(nextIsOn) { | |
// ✅ Good: Perform all updates during the event that caused them | |
setIsOn(nextIsOn); | |
onChange(nextIsOn); | |
} | |
function handleClick() { |
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
if (typeof window !== 'undefined') { // Check if we're running in the browser. | |
// ✅ Only runs once per app load | |
checkAuthToken(); | |
loadDataFromLocalStorage(); | |
} | |
function App() { | |
// ... | |
} |
NewerOlder