useEffect

Loading "useEffect"
πŸ‘¨β€πŸ’Ό We want the query to update as the query params change through a popstate event. Once you added the useEffect hook, you then have to prevent the default full refresh of the page when the user clicks the back/forward button.
πŸ§β€β™‚οΈ I added a new utility called setGlobalSearchParams which allows us to set the URL search params without triggering a full-page refresh. So whenever the user clicks "submit," we update the URL search params. The trouble is, when they hit the back button, the search doesn't stay synchronized with the URL (yet).
You can take a look at my changes for details on what I did.
πŸ‘¨β€πŸ’Ό Thanks Kellie. So what we want you to do is make it so when the user hits the back button in their browser and the search params are updated, we update the input value.
The only way to be notified of a back/forward event is to listen for the popstate event. You can do this by adding an event listener to the window object.
window.addEventListener('popstate', () => {
	// update the input value
})
To test whether you got this right follow these steps:
  • Go to (in a new tab)
  • Add " cat" in the input
  • Click "submit"
  • Click the back button in your browser
  • The input value should now be "dog"
That last step will be broken and that's what you should fix in this step.
Spoiler alert: there's going to be a bug with our implementation that we'll fix in the next step, so if you notice a bug... we'll get to it πŸ˜…
One more thing, we're going to need to retrieve the query param in two places. Right now we get it to initialize our state, but we'll also want to get it when the popstate event fires. So you'll be extracting that logic to a small function and we'll pass that as a function to our useState (using the lazy initializer as before).
In our case the performance difference is so small it's not really worth it, but since we're making a function anyway, you can simply pass the function to useState directly:
// both of these work just fine:
const [query, setQuery] = useState(getQueryParam())
const [query, setQuery] = useState(getQueryParam)
You're going to be making the getQueryParam function. Got it? Great, let's go!
Login to get access to the exclusive discord channel.
  • 🎣Hooks
    rules of hooks violation
    seven πŸš€:
    Hi, we clearly violate the rules of hooks, is it allowecd with the use hook? ``` function ShipDetai...
    • βœ…1
    8 Β· 3 days ago
  • 🎣Hooks
    πŸ”€Suspense
    Clarification on how to trigger a suspense
    seven πŸš€:
    Hello, in lesson about useTransition Kent said that "anytime you have a state update thats going to ...
    3 Β· 3 days ago
  • 🎣Hooks
    Issue with video captions
    Hawk πŸš€:
    Not a big issue but on the intro video for React hooks, the video captions block most of the video f...
    • βœ…1
    1 Β· 24 days ago
  • General
    AI Assistant?
    John πŸš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • βœ…2
    2 Β· 25 days ago
  • General
    βš›οΈFundamentals
    Error boundary good practice
    Lloren πŸš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • βœ…1
    1 Β· a month ago
  • General
    Script to save playground folder
    larissapissurno πŸš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • βœ…1
    2 Β· a month ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus πŸš€:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • βœ…1
    1 Β· a month ago
  • General
    Welcome to EpicReact.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • πŸš€5
    46 Β· 18 days ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet πŸš€ πŸ†:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • βœ…1
    15 Β· a month ago
  • General
    Received this error when running the setup script for React Fundamentals
    ChrisP πŸš€:
    Hey guys, I am completely blocked at the moment. When I clone and run the setup for react fundamenta...
    • βœ…1
    2 Β· a month ago
  • General
    Unexpected server error (workshop-app does not load onboarding step)
    Matias 🌌 πŸš€:
    Hey! πŸ‘‹ I installed the free workshop "Build React Hooks" last week with no issues. Yesterday, whe...
    • βœ…1
    3 Β· a month ago
  • General
    Eye opening moment in 05/06 (β€žsatisfiesβ€œ operator of typescript)
    Chrigi πŸš€:
    Up until today I was not aware that having the type annotation on a variable is actually a type-cast...
    • πŸ™Œ2
    • βœ…1
    2 Β· a month ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans 🌌 πŸš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • βœ…2
    4 Β· 2 months ago
  • General
    Failed to fetch dynamically imported module...
    FacuPerezM:
    I am getting this error out of nowhere, in the 'test' tab inside the Workshop app. ``` Failed to f...
    • βœ…1
    3 Β· a month ago
  • General
    Epicshop not saving the video resolution
    Toni πŸš€ 🌌:
    Playback speed and caption settings are saved, but the video resolution always defaults to auto. Is ...
    • βœ…1
    7 Β· 2 months ago
  • General
    Clicking an exercise file launch VIM instead of VS Code
    DBattou πŸš€:
    I started going through the workshops, everything is setup and working fine except for opening a fil...
    • βœ…1
    2 Β· 2 months ago