react-responsive VS zustand

There are NPM packages like react-responsive that provide custom hooks for easy usage of Media Queries:

Are people using libraries like react-responsive, using tailwind css's breakpoints, or writing plain old media queries using css.

You can try this out. Also check out React responsive.

You can use react-responsive for JS media queries. Then pass props conditionally based on the media query. Alternatively make a "responsive" boolean prop and apply styles with Tailwind's responsive helpers if the prop is true.

The responsive layouts don't have to be similar at all. With a library like https://github.com/yocontra/react-responsive you can use media queries to completely switch to different components using a HOC.

Check out: react-responsive

I have personally made use of a few different things ranging from media queries directly in whatever CSS you've written or a library like react-responsive which makes it much easier to render (or not render) specific UI based on whatever screen size your app is currently being rendered on using conditional rendering. If you're using a UI library like Material UI, it most likely already has a hook for managing the content size based on the size of the media that you can use. See Material UI: useMediaQuery.

There's this pkg that makes media queries pretty easy react-responsive

11. React Responsive

Daishi Kato, creator of Zustand and Jotai, says there are a few things we need to support RSC serialization:

Zustand

Link: https://zustand-demo.pmnd.rs/

For more code examples visit the documentation here

Have you ever wanted to learn state-management but it felt so overwhelming to get started with Redux? Or maybe you're already using Redux but don't want to take the burden anymore? If so, you might want to take a shot at Zustand! Its an amazing state management library that's easy to get started and maintain in a long run. In this post, we'll dive into creating & sharing stores with this tiny Redux alternative.

You add the current user state to a React Context or state management library, read from it on the top bar, and write to it after a user signs in. Done. No big deal, right?

Zustand

I tried using skipHydration inside my zustand store based on their docs, then rehydrating it inside my modal. So far im getting the same errors. https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md

Reducer-based: requires dispatching actions to update a big centralised state, often called a “single source of truth”. In this group, we have Redux and Zustand.