Scroll Restoration

πŸ‘¨β€πŸ’Ό Now that we've got JavaScript running on the page, our customers are noticing that their scroll position is not where they expect it to be. For example, if you're on the notes list page and you're scrolled down a bit, then clicking the "Edit" link leaves you where you are when it should scroll the user to the top of the page so they can edit the note. This is because the browser is no longer responsible for navigations, so the role of scroll restoration lies in our hands!
Luckily, Remix has a πŸ“œ ScrollRestoration component we can use to fix this. Please use that component!
Tip: To test this out, make your browser window short so that your page is scrolling, then scroll to the bottom and click the Edit button.
Once you've done that, come back here, I've got another task for you.
You got it done? Ok, great! Now I actually need you to "undo" the scroll restoration for a particular navigation. If you're scrolled down a bit on the list of notes, then change notes, it's jarring to have the page scroll to the top. So for those links, we don't actually want to scroll the user to the top. Oh what to do? 😱
Luckily, Remix allows you to control this scroll restoration behavior on a per-link basis using the πŸ“œ preventScrollReset prop (through React Router):
<Link preventScrollReset to="candy">
	Candy
</Link>
Tip: To test this out, make your browser window short so that your page is scrolling, then scroll to the bottom and click different notes.
Go ahead and add the preventScrollReset prop to those links.
Login to get access to the exclusive discord channel.
  • πŸ”­foundations
    Styling 05 workshop error: Expected component `CodeFile` to be defined
    jocosage 🌌:
    Is this error intended behaviour, it doesn't look so as in the git repo there seems to be instructio...
    • βœ…1
    3 Β· 5 days ago
  • πŸ”­foundations
    Foundations Review
    Baghira 🌌:
    I finished the foundations workshop. I liked the SEO part and error handling part. Remix built-in to...
    • βœ…2
    1 Β· 18 days ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· a month ago
  • πŸ”­foundations
    Parent Data - SEO - Typescript concept help
    remich 🌌:
    I'm relatively new to TS, and I can see the value that Kent is talking about with the second argumen...
    • βœ…1
    1 Β· 2 months ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    Reviewing foundations, Mutations, Actions
    silvanet πŸš€ 🌌:
    Forgive me for this. I went over the file size limit. I don't want to sign up for being able to exce...
    • βœ…1
    2 Β· 4 months ago
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 17
    78 Β· a year ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· a year ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· a year ago
  • πŸ”­foundations
    Progressive Enhancement & Client Side Scripting
    Chwizdo 🌌:
    I'm currently just starting at foundations | scripting part, and until now, I've heard KCD mentioned...
    • βœ…1
    4 Β· a year ago
  • πŸ”­foundations
    Unable to push my changes to Github
    Sachin Purohit 🌌:
    When trying to push changes, I am getting the below error- remote: fatal: did not receive expecte...
    • βœ…1
    3 Β· 3 months ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· 3 months ago
  • πŸ”­foundations
    How to fetch data on client (e.g. Combobox)
    QzCurious 🌌:
    After learning from epic web, I'm really into SSR data fetching pattern. I'm now doing SSR all of m...
    • βœ…1
    2 Β· 4 months ago
  • πŸ”­foundations
    @remix-run/react vs @remix-run/node
    mustak πŸš€ 🌌:
    Module: Search Engine Optimization Exercise: Meta Overrides There are 2 different imports for type ...
    • βœ…1
    2 Β· 4 months ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    How can I do this?
    silvanet πŸš€ 🌌:
    Viewing the Intro (from the Workshop) for Mutations, the course has an embedded video where Kent exp...
    • βœ…1
    3 Β· 4 months ago
  • πŸ”­foundations
    remix flat routes
    mustak πŸš€ 🌌:
    Can someone give me a quick explanation of the following: ```markdown ## underscores with files _fi...
    • βœ…1
    2 Β· 4 months ago
  • πŸ”­foundations
    How to launch VS Code editor from File links in app using wsl2?
    mustak πŸš€ 🌌:
    I've tried setting environment variables in .env: ```js KCDSHOP_EDITOR=code ``` and ```js KCDSHOP_ED...
    • βœ…1
    5 Β· 4 months ago
  • πŸ”­foundations
    Meta function not being called
    juliano.brasil 🌌:
    Hi. I'm checking the assets on the foundations module, and something is somehow not working for me (...
    • βœ…1
    7 Β· 4 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· 5 months ago
  • πŸ’Ύdata
    πŸ”­foundations
    Handle Missing Data - Error when i'm using invariantResponse
    Luan.ibarra 🌌:
    Hello, I'm trying to use the invariantResponse utility from // "#app/utils/misc.ts" to do this in a...
    • βœ…2
    2 Β· 6 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Native Logging
    trendaaang 🌌:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • βœ…1
    6 Β· 6 months ago
  • general
    The video play is pretty laggy currently
    QzCurious 🌌:
    I thought I should tag you for this <@105755735731781632>. Please take a look if something wrong.
    • βœ…2
    9 Β· 6 months ago
  • general
    New Workshop Scheduled
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Hey Epic Web devs! I wanted to let you know before everyone else on here: https://www.epicweb.dev/ev...
    • 2
    0 Β· 6 months ago
  • general
    Deploying an exercise
    Khoi πŸš€ 🌌:
    Dear <@105755735731781632> , First of all, I really appreciate your effort in building this EPIC cou...
    • βœ…1
    1 Β· 7 months ago
  • general
    "Start App" throws error: Error: Cannot add empty string to PrefixLookupTrie
    Martin 🌌:
    βœ— npm run start > start > kcdshop start [playground:4000] [playground:4000] > dev [playground:4000...
    • βœ…1
    7 Β· a year ago
  • general
    πŸ“forms
    Can't start the playground
    trendaaang 🌌:
    Been a minute since I last worked on this course. Just tried running the app and was notified that t...
    • βœ…1
    3 Β· 7 months ago
  • general
    Question about the Workshop App tabs
    sjollivier 🌌:
    Just started the course. I might have missed this in the Getting Started video, but how should I be ...
    • βœ…1
    1 Β· 7 months ago
  • πŸ”­foundations
    I'm in Routing
    silvanet πŸš€ 🌌:
    I tried to run npx remix routes and got this: ``` Error: Could not determine server runtime. Please ...
    • βœ…1
    5 Β· 9 months ago
  • general
    "Start App" throws TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    ntin89 🌌:
    ```TypeError: Cannot read properties of undefined (reading 'toLowerCase') at userAgentContains (...
    • βœ…1
    4 Β· 8 months ago
  • πŸ”­foundations
    Discussions about epic web courses ordered by course and unit
    Yuli πŸ† 🌌:
    Hi, where can I find the comments/posts for the epic web courses ordered by course and class? I'm in...
    • βœ…1
    4 Β· 8 months ago
  • general
    Epic React Workshop Series
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Hey <@&1123674184959148043> folks! I'm excited to announce this to you all first before I post on so...
    • 2
    • πŸŽ‰1
    6 Β· 8 months ago