antonioru / beautiful-react-hooks

🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
https://antonioru.github.io/beautiful-react-hooks/
MIT License
8.17k stars 577 forks source link

Feature request for useSSR hook #380

Closed playerony closed 2 years ago

playerony commented 2 years ago

Is your feature request related to a problem? Please describe. Quickly know where your code will be executed;

Describe the solution you'd like I want a hook that will give me information if I run my code in the browser or server A clear and concise description of what you want to happen.

Describe alternatives you've considered https://usehooks-ts.com/react-hook/use-ssr https://github.com/alex-cory/use-ssr

antonioru commented 2 years ago

this is a very good utility and definitely a good idea, but should it be a hook really? if so why not just a common utility?

I mean... we can definitely provide a utility checking if it is server side or client side rendering and we can possibly export it from the library, something like this:

const isServerSideRendering = () => typeof window !== 'undefined'; 

// import something like this maybe?

import { isServerSideRendering } from 'beautiful-react-hooks/commons'; 

or we can improve and extend (and rename) the already existing isClient function.

I generally tend to consider hooks pieces of React-related business logics that help the devs to use (or hook into) React features, but this is just a check that's not strictly related to any React feature... to be fair such a utility can be used in many other context...

I know a lot of other React hook libraries have such a hook, but in fact one of the reason I wrote this library is to enforce good practices using React hooks (which are very often overlooked) and I completely disagree with this approach for the instance:

https://usehooks-ts.com/react-hook/use-ssr

this is actually the reason why I avoided having hooks like useArray or useMap, these are basic javascript structure that are not related to React and - in my opinion - tend to pollute the codebases. (( looks like over engineering to me ))

Please let me know what you think

playerony commented 2 years ago

I've made some small research about that and I came to the conclusion that It's quite tricky :P I've found this in docs (https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook): A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. So may use other hooks, but doesn't have to. The only difference between the function and the hook, in this case, is that this automatically forces it to use rules of hooks. From the same doc above: [...] it’s just like a normal function. Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.. But I also understand your perspective and I think it does not make sense as far as isCliect function is more appropriate and reusable. To close! Thanks for this brainstorm! It's always good to learn something new: P