
React create composable components - dzurico
https://www.dzurico.com/react-compound-components-with-usecontext-hook/
======
ThePadawan
I'm not usually one to ad hominem like this, but IMO you cannot both posit to
give advice on good frontend engineering and fiddle with window.onScroll.

~~~
azangru
Are you against listening to the onScroll event in general, or only against
scroll hijacking?

~~~
patates
I'm not the person you are replying to but I have strong feeling that it's the
latter. The scroll event has, IMHO, outside the annoying infinite scroll
circus and the hijacks, a single good use: Lazy loading of expensive resources
(then one would ask why it's not paginated in the first place but well).

~~~
taoistextremist
It's more convenient than pagination for the user. At least up until they want
to share a specific section

~~~
dmix
> At least up until they want to share a specific section

Which is why I hate automatic pagination unless some sort of anchor or direct
URL to a section is made (prominently) available.

------
ponyous
Can somebody think of easier way to implement tabs with current setState
functionality? Everyone! It may have few more lines of code but it's gonna be
clear and every react dev is gonna know what it does.

Seriously, feels like we are going in circles and each round we add another
layer of complexity on top.

Also a trend I noticed and it bothers the hell out of me is the fact that all
these people build todo list apps and blog about it frantically how the world
is different now and easier. Maintain an app with xK+ lines of code for a year
or two and then tell me about it.

~~~
dzurico
Hi I can understand your point but if a post is written around a difficult
example you need more time to understand it then fully understand what the
functionality does. In my case I used a todo because everyone know how to do
it and you can appreciate how the use of Hooks can simplify or change your
code.

~~~
ponyous
Sorry to be PITA. TODO list example wasn't specifically targeted at you. I'm
just frustrated because I finished a big migration just Today that was caused
by uninformed internet blog posts praising specific library which mostly works
only in simple examples (TODO Lists).

Thanks for spreading the knowledge, but I think beginners don't take advice as
"this is an option of how things can be done" but rather as "this is how we do
things and we should follow this". Maybe a paragraph saying when it makes
sense to go for this pattern would help.

~~~
acemarke
Out of curiosity, which library are you referring to?

~~~
ponyous
Specifically: `react-native-navigation` replaced with `react-navigation`.

Few issues:

\- Tons of bugs (see next point)

\- Bigger error/bug surface, 3 languages compared to 1.

\- Poor documentation

\- Stopped accepting PRs for 1.0 when they decided 2.0 is the way to go
(randomly, 2.0 wasn't nearly ready)

\- Closing issues without any response (bot that closes them, wtf?)

Check Twitter, Google or whatever and people will mostly say positive stuff
about it how they are excited and how fun it is for their TODO List app. We
tried building something more sophisticated and it's insane how many things
don't work as documented.

Note: react-navigation is also pretty bad, it improved in last year, but there
is nothing better in the react-native ecosystem (there used to be something
but during my months of inactivity it was removed from the RN itself).

Can probably compile a list of high profile libraries that suck if anyone is
interested...

~~~
stackola
>Can probably compile a list of high profile libraries that suck if anyone is
interested

Please do!

I agree with your stance on react-native navigation, but I'm not having too
many problems with react-navigation. What's your issue with it?

~~~
ponyous
Seems like there is interest, will compile and publish to HN in the next
couple of weeks.

react-navigation is pretty good actually, haven't had any big issues this
time. At the beginning when I first evaluated it they had breaking changes way
too often, things were buggy, all in all, it wasn't ready for production.
Today it feels different, but I can't write a blog post about it yet as I
haven't been using it for long enough.

~~~
com2kid
3.0 has some breaking changes, but hey, they are using semver correctly at
least!

I'm still not sure how to get previous functionality from 2.0 (app wide
background image) working in 3.0, considering that now my root component has
to be provided by React-Navigation.

~~~
stackola
You can wrap your root navigator!

<ImageBackground> <RootNavigator/> </ImageBackground>

There can be only 1 navigator rendered at a time, but it does not have to be
the root of your application. Otherwise there wouldn't be any redux, either.

~~~
com2kid
Ah ok, the docs didn't make it 100% clear and I got tired messing with the toy
app I was using with React Navigation.

------
halfmatthalfcat
What's the point of using Typescript if everything is typed as any or provides
no types at all (as demonstrated in the article)?

~~~
Zooper
There is no point in Typescript, as new ECMAScript specs provide most of the
syntactic sugar and compile-time type checking is obviated by exactly 1 test,
which people using it are writing anyway; this is not a compelling use-case
for an entirely new syntax, and it needs to die, instead of contributing to
the already-bloated ecosystem.

~~~
stackola
>compile-time type checking is obviated by exactly 1 test

>1 test

per code path?

------
rhinoceraptor
Wayback machine link:

[https://web.archive.org/web/20190115130326/https://www.dzuri...](https://web.archive.org/web/20190115130326/https://www.dzurico.com/react-
compound-components-with-usecontext-hook/)

~~~
ramigb
whatever happened to the current article?

------
neurotrace
What's with the title? The title on the article is fine but the one on Hacker
News is terrible. It doesn't mention anything to do with hooks and components
are supposed to be composable. That's kind of the goal.

------
robjan
My click got hijacked and it took me to a PDF reader app on Google Play.
Usually you wouldn't expect this kind of behaviour on a personal blog.

------
talkingtab
Not to deny any and all of the points made, but getting beyond those, it would
be nice to get an assessment of using the new react hooks and especially the
context in this manner?

I find the whole thing of reusing components in React harder than I would
hope, and I find the hook API has let me remove massive amounts of code. The
context API does the same thing, so combining them in some way ...?

~~~
kansface
Hooks are an attempt to _reuse stateful logic_. This is a problem that React
never solved well moving from mixins, to higher order components, to children
as render functions, and finally to hooks (maybe!). Ideally, hooks would also
fully replace eg usage of react-redux even if that isn't their stated goal
(managing global state across components is not really the same thing as
reusing stateful logic). In fact, I don't really care about the former at all
in the case of the later.

The current hooks API is not up to the task, or even up to integrating with
react-redux given constraints around the new concurrent rendering and
reasonable performance [1]. Hooks run during render with no ability to bail,
while react-redux requires a way to avoid calling render in the first place to
avoid every connected component re-rendering on every state change (ie,
basically the whole tree)[2]. The new context API is also not ready for the
limelight [3].

Hooks would solve _some_ problems but at the expense of introducing yet
another way to do _some_ things. They can't replace react-redux or even
provider a cleaner binding. Using hooks is risky because the API really ought
to change to make them more useful, and they aren't particularly performant or
powerful.

1\.
[https://github.com/facebook/react/issues/14110#issuecomment-...](https://github.com/facebook/react/issues/14110#issuecomment-447040520)
2\.
[https://github.com/facebook/react/issues/14110#issuecomment-...](https://github.com/facebook/react/issues/14110#issuecomment-448070764)
3\.
[https://github.com/facebook/react/issues/14110#issuecomment-...](https://github.com/facebook/react/issues/14110#issuecomment-448074060)

~~~
talkingtab
When the context API was released I began to rip out redux. After things went
well with that, I no longer use redux, and I was a big fan of redux. A
problems I had with using context was what seemed to me like a crufty way to
access it - the whole wrapping things in a Provider. Now, I can just rip out
more code and use the context hook. I'm a big fan of technologies that let you
rip out tons of code. My experienc e then is that hooks are a great
improvement. So far ....

------
mstijak
CxJS uses the same concept for charts, form validation, and other inter-
component communication.

[https://docs.cxjs.io/charts/line-graphs](https://docs.cxjs.io/charts/line-
graphs)

------
ricardobeat
Mirror: [http://archive.fo/dM5mR](http://archive.fo/dM5mR)

------
stupidcar
I find it ironic that Angular's dependency injection system attracted so much
disdain, particularly from React advocates, then React ends up implementing a
less-powerful and more verbose equivalent in its new context API.

------
dzurico
I'm sorry guys can I know what's going on I really dont' understand

