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!

Please set the playground first

Loading "useEffect"
Loading "useEffect"
Login to get access to the exclusive discord channel.
  • ๐ŸŽฃHooks
    General
    Terminal error when setting playground
    Natiq ๐Ÿš€:
    Every time I click on the "SET TO PLAYGROUND", the app stops with the following error. How can I fix...
    1 ยท 5 days 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...
    • ๐Ÿš€6
    59 ยท 6 days ago
  • General
    error when installing the MCP server
    DBattou ๐Ÿš€:
    I tried to install the mcp server by following the instructions on the blog post here -> https://www...
    • ๐Ÿ‘1
    • โœ…1
    8 ยท 2 months ago
  • General
    Interviews with Experts -> Start Watching CTA gives regional restricted license error
    .shreyasvaidya ๐Ÿš€:
    I have purchased my course from India with the regional pricing method, and I am trying to watch the...
    • โœ…1
    4 ยท 4 months ago
  • General
    You are offline - warning
    marianavinyolas ๐ŸŒŒ ๐Ÿš€:
    Hi there! Today I want to start with the Advanced Patterns workshop, but after clone and run the rep...
    • โœ…1
    3 ยท 4 months ago
  • General
    โš›๏ธFundamentals
    Clicking on index.html when start opens in Terminal and not on the editor.
    Waddle ๐Ÿš€:
    Hello, just starting out with this and noticed that when I click on the 'index.html' file as display...
    • โœ…2
    1 ยท 4 months ago
  • General
    Am I following the course in the proper way?
    bauti ๐Ÿš€ ๐ŸŒŒ:
    The way im doing things in epic-react is: Clone the repo for the module i want to do (for example a...
    • โœ…1
    3 ยท 4 months ago
  • ๐ŸŽฃHooks
    General
    VSCode imports from wrong source
    mathemaat ๐Ÿš€:
    I encountered something silly that threw me off for a minute or two. I was working on the Tic Tac To...
    • โœ…1
    1 ยท 5 months ago
  • General
    Terminal Errors When Running Workshop App
    Giovanni ๐Ÿš€:
    Hello guys, I am facing an issue with the Workshop App, that basically I get this message over and...
    • โœ…1
    3 ยท 5 months 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
    6 ยท 10 months ago
  • General
    Cannot connect workshop app
    Philipp ๐Ÿš€:
    I try to connect with my Company MacBook and get the following error ๐Ÿ˜ฆ There was an error: unable t...
    • โœ…1
    5 ยท 6 months ago
  • ๐ŸŽฃHooks
    Perserve State in Local Storage
    Jakub ๐Ÿš€ ๐ŸŒŒ:
    Hey, I think I found an improvement in the solution for one of the tasks. If we store the state of a...
    • โœ…1
    1 ยท 6 months ago
  • General
    Problem generating the diff
    mikeyjmcc ๐Ÿš€:
    I am not sure what has changed but I am now receiving errors that the diff cannot be generated. This...
    • โœ…2
    1 ยท 6 months ago
  • General
    Problem with playground
    Xrayoptions ๐Ÿš€:
    Problem section doesn't show <@105755735731781632> how to fix it ?
    • โœ…1
    9 ยท 6 months ago
  • ๐ŸŽฃHooks
    useEffect primitive dependency array
    anonymousBlack10:
    We said that in the useEffect dependency array we should put primitive values, like strings, numbers...
    • โœ…1
    6 ยท 7 months ago
  • General
    How to run tests in IDE?
    anonymousBlack10:
    Is it possible to run the tests from the IDE or are they setup to be run just from the browser? Some...
    • โœ…1
    1 ยท 7 months 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 ...
    • โœ…1
    3 ยท 8 months ago
  • ๐ŸŽฃHooks
    params are not recognized
    Amin ๐Ÿš€:
    when I pass param in url like http://localhost:5639/exercise/01/04/problem?preview=chat&query=cat+do...
    • โœ…1
    8 ยท 7 months 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 ยท 9 months ago
  • ๐ŸŽฃ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 ยท 8 months 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 ยท 9 months 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 ยท 9 months 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 ยท 9 months 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 ยท 9 months 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 ยท 9 months 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 ยท 9 months ago