Jss: [react-jss] Investigate on how to support the new React hooks

[HenriBeck]

Supporting hooks when React 16.7 is officially being released might be good as they are cleaner than a HoC, though we should find a solution where we can share most of the code between a HoC and a Hook.

I created a prototype on how it might be implemented. Note this prototype isn't stable and there are quite a few things still missing from it. No guarantee that it works. I only tested it with a relatively small personal project.

https://github.com/cssinjs/react-jss-hook

[kof]

here are also some ideas https://gist.github.com/kof/43ac135686c71c536deb0db61b94e6e3

[HenriBeck]

We will create a prototype here: https://github.com/cssinjs/react-jss-hook and merge this into react-jss once the hook is stable enough and when they are released in 16.7.

[andywer]

Cool that you are already working on the hook prototype!

Had a quick look at the source code. Would like to share some early feedback if you don't mind:

Are you sure about the createUseStyles() factory?

Having a provider component to configure the hook via context seems like the cleaner approach, esp. users need to have one for SSR anyway already.

[HenriBeck]

Yes, we need the factory to insert the stylesheets in the correct order properly.

[kof]

For the context: if you define insertion order by render, it will be depending on when react renders a component, which might be different for the same component depending on the state and leads to specificity issues.

If we use a function call in the root of the module scope to set the order, we always rely on when module has been imported, which is a more stable approach.

[andywer]

[FYI] I know you have given the whole injection order issue a lot of thought, but I couldn't help, but keep thinking that there might be another way.

Styled-components, for instance, they seemed to conclude in its early days that injection order based on time of first rendering of a component instance works well enough for them, as long as you don't use tag selectors: https://github.com/styled-components/styled-components/issues/1

I understand the appeal of an injection-order-perfect solution, but I wanted to see the other side, too. So I wrote that to see how well it works and "feels like": https://github.com/andywer/react-usestyles

Short summary: The styling hook that doesn't need to be instantiated works quite well, uses the same approach as styled-components, but suffers from the same edge-casy limitations, of course. Here is a demo in combination with material-ui.

Main benefit is that I was able to abstract the CSS-in-JS implementation away. Just wanted to share the results of my tests. Esp. abstracting the styling library away (see its readme) could be an interesting path to persue :)

[HenriBeck]

I think we wouldn't be able to share stylesheets as easily without seriously breaking some other styles.

@andywer Your example is elementary. See for something which already doesn't work anymore: https://codesandbox.io/s/pmo73019lm

Also, your implementation is very inefficient regarding reusing stylesheets, updating function values, etc.

[andywer]

Sure, I just wanted to share what I encountered.

See for something which already doesn't work anymore

This is what I meant with "uses the same approach as styled-components, but suffers from the same edge-casy limitations". This is the one big limitation: You have to "wrap the component-to-be-styled tightly" when styling some external React component (make a component with styles that only wraps the external component). I guess that's why they made the styled-components API look like it does... ^^

Good concise example, though!

your implementation is very inefficient

Sure it is, it's quickly hacked together. Optimization is straight forward, but not a concern in first iteration. Goal was to see if it makes sense at all 😉

[kof]

Sometimes to get the perf optimizations we have to rethink the api, so these things need to go at the same time. It is still very good to make those experiments, so def. huge props to you!

[HenriBeck]

Yeah, you can expect it to be released with a minor version of version 10. The hook will most likely not be ready for 10.0.0

[alex-shamshurin]

What you say about https://github.com/andywer/react-usestyles ?

[HenriBeck]

There are some issues with that library, and it doesn't seem to be maintained anymore. We are getting ready for merging the PR. There are just a few bugs to fix

[kof]

It is released, everyone check it out in the latest alpoha!