2020-02-21
1622
#react
Ben Honeywill
14404
Feb 21, 2020 ⋅ 5 min read

Developing responsive layouts with React Hooks

Ben Honeywill UK-based frontend engineer building cool web software with @LushEngineering. Teacher, learner, and lover of JavaScript.

Recent posts:

Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 ⋅ 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 ⋅ 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 ⋅ 8 min read
Exploring Tailwind Oxide

Exploring Tailwind Oxide

Tailwind Oxide was introduced to address common issues that exist with Tailwind CSS, such as the complex setup process.

Marie Starck
Mar 22, 2024 ⋅ 5 min read
View all posts

21 Replies to "Developing responsive layouts with React Hooks"

  1. There is no clue to emulate media queries via using React Hooks. Better thing that you can do using this method is kind of container queries emulation — when you watching for width used by component, not window width.

  2. Hey Omar, I completely agree with you, CSS should almost always be the first tool you reach for to do responsive design.

    Saying that, there are reasons to use both, in the right circumstances.

    Firstly you need to ask if what you are changing on mobile vs desktop is a style change, or if it is application logic. If it is application logic and you need to do any kind of calculation or complicated conditional rendering using the viewport size then putting that logic in your JavaScript code rather than writing complex media queries in CSS could be beneficial.

    Secondly, and more importantly, hiding content with CSS doesn’t actually remove it from the virtual DOM. This means that React is still going to be re-rendering components that aren’t actually being used, so if you are showing drastically different components for different viewport sizes it could actually improve your performance to not render those components at all!

    Hope that helps.

  3. Hey Alexander, Yeah that’s a good idea. You could achieve what you are describing by using the React.useRef Hook. You could then pass the ref into a custom hook of your own design that returns the dimensions of your component based on that ref.

  4. It’s one reusable component, once that code is in place, it’s a simple 2 line solution that allows you to render completely different content. Something that you can’t do nice and cleanly with CSS media queries.

  5. Really great post! It’s a much cleaner solution than writing tons of media queries and `display: none` declarations when dealing with complex content layout shifts between mobile & desktop views 🙂

    Everything works perfectly in my development environment, but I’m running into an issue implementing this in production with Gatsby because of how Gatsby is handling SSR.

    I am obviously getting a `window` is undefined error, which is expected. So I created a simple utility function:

    `export const isSSR = typeof window === ‘undefined’;`

    And used it like:

    “`
    const [width, setWidth] = React.useState(isSSR ? 0 : window.innerWidth);
    const [height, setHeight] = React.useState(isSSR ? 0 : window.innerHeight);

    “`

    This gives us a fallback value of 0 on server side and allows me to successfully execute a `gatsby build` command. The issue, however, is that once the content is served up in production, I am not getting the correct component returned.

    It seems that SSR is still somehow returning true on the client side and preventing values from being set/correct components from being rendered until the window is resized enough to manually trigger a component swap, then everything works as intended when resizing.

    When I refresh the page, I end up with broken components again.

    Any guidance here would be much appreciated. I imagine a lot of people are dealing with when implementing with Gatsby or NextJS.

    Thank you so much!!

  6. As a follow-up here… after some digging, it seems that this approach is not well suited for any SSR solution, unless there are workarounds that I am unaware of.

    The issue is how client-side re-hydration happens. Since HTML is server-generated for Gatsby and server-rendered for NextJS, there obviously can be no access to `window`. In these cases, we are having to generate a default view of either mobile or desktop (depending on how your responsive rendering component is configured) and then have the component rehydrate client-side once `useEffect` fires. When this happens there is an obvious flash between the default server-rendered view, and the properly rendered view based on `window.innerWidth` in the client.

    We are also losing the SEO and performance benefits of SSR in this case, because the entire component is essential just rendering on the client side :/

  7. CSS media queries are fine when you have the same component for every screen size but just with minor changes to it (width, padding, etc) but what do you do when you have a component for a screen size and another component completely different for another screen size? For example, you have a full navbar with one link besides the other for desktop and an hamburger menu for mobile. In this case you need a conditional render, css media queries will not do the job.

  8. Can you explain how the cleanup happens in the useEffect? I see it returns the function, but how is it called?

  9. Hi Chris, did you find some workaround for this issue? im having the same problem i cant find more info to this day.
    Thank you!

  10. Ben, thanks for the great complete article! And Chris, thank you for the great note about possible issues with Gatsby, SSR and SEO.

    I’m happy to say that I’ve had success getting it working in my Gatsby project, including the built/rehydrated
    version! Achieved it using the browser-monads package to detect if window variable exists (https://www.npmjs.com/package/browser-monads)

    I ended up adding the ViewportProvider inside my Layout component. This comes with a caveat that useViewport() hook can’t be called directly from the Page component (since Layout is a child of Page). However ViewportContext.Consumer does work directly in the Page if it’s nested under the Layout component; and the useViewport() hook does work in any of child of the Page component.

    Our team’s use case is primarily swapping out fairly similar content, but for SEO I think will be to be careful to always render the SEO-preferable content by default (which I think is generally a good habit anyway.)

  11. I think one way to improve performance would be if instead of having the hook return the width, you could have the hook return whether or not the breakpoint was hit. With the current setup the state is being updated every time the width changes, but you don’t actually need that much granularity, you just need to know if the breakpoint was hit. The width could be stored in a ref instead that doesn’t trigger an update and the hook could be modified to be something like `useBreakpoint(width)` with a boolean breakpoint state instead.

  12. https://codesandbox.io/s/quizzical-sun-tqgvgt
    In a real application, the logic is divided among several (many) components, so in order to be able to use the technique you described, you need to separate the code into a separate component, which I did. I also rewrote for the latest version of react. please see the working code , and if you can improve. because I’m just a beginner.
    By the way, the handling of {children} has changed in React 18

    Translated with http://www.DeepL.com/Translator (free version)

Leave a Reply