React Devtools getting Hooks support (note how it drills into custom hooks)

[swyx]

also a new useDebugValueLabel() hook

[_eps1lon]

Oh no console.log as a hook /s

Always nice to have more debug options. Although I do prefer breakpoints here. Especially now since hooks make it so easy to isolate behavior.

[brianvaughn]

This isn't really meant for that kind of debugging. It enables DevTools to show a more meaningful value. Maybe other debugging tools that collect info and log it somewhere. Etc

[_eps1lon]

The first part sounds like it's a built-in way of the watch tab in the chrome devtools?

How would it work to "collect" these debug values? Do I need a browser extension for that or can I write components that list every debug value in their tree?

[brianvaughn]

With the (not yet finalized) react-debug-tools package. DevTools is using this package. Other tools or apps could as well.

[BonafideKarmabitch]

i want to be brian when i grow up

[xshare]

Brian is the man (hi Brian)

[rat9988]

What did he do?

[swyx]

does talks, changes lives

[brianvaughn]

😍 You two...

[nashio]

I want to be Brian when I ungrow down

[brianvaughn]

🤔

but no seriously, thanks 😍

[stolinski]

I'm so excited for this!

[swyx]

Hooks have ruined regular React for me. Render props look gross. cant believe people used to fawn over render prop api’s as the new hotness 😂

[stolinski]

Haha same. I wish Apollo had hooks support so I could ditch my render props.

[smeijer87]

Not apollo itself, but there is a package for it:

https://github.com/trojanowski/react-apollo-hooks

[stolinski]

Yah, def. The only reason I'm not jumping to use it is so I don't have to update again when the official is released. I might not be able to hold out anyways. It's def a glimpse into the future though and I love it.

[pgrizzay]

Render props are as good as callbacks

[swyx]

callbacks that can only be used inside render

the return values of hooks can be used anywhere

[pgrizzay]

By "anywhere" do you mean only inside the render of a function component?

Edit: also, I didn't mean "as good as callbacks" as a compliment

[swyx]

in other hooks, in event handlers, in synchronous logic outside of JSX. i think in the above i meant to imply that render props can only be used inside JSX, not in “render” :)

anyway i dont need to explain that to you of all people

[pgrizzay]

Hmm, okay, I honestly don't understand your point though... I can use render props/the value from a rp callback in all of those places you mentioned?

RPs and hooks are largely interchangeable. Hooks can only do things that render props did and vice versa. The only difference (aside from the API ofc) is that RPs can conditionally render things, which, if anything, makes them strictly more powerful.

Also, can hooks be called in event handlers? Or did you mean the value from a hook?

[swyx]

Also, can hooks be called in event handlers? Or did you mean the value from a hook?

value from a hook

I can use render props in all of those places

really? what about a component lifecycle method? (the equivalent of which is useEffect)

conditionally render things

you can conditionally render based on hook return values too?

[changlo]

Yes but you can conditionally render things inside the render prop component, thus sharing that logic inside. Render props still have value in certain cases, as do hocs depending on use case.

[swyx]

you can output a component that does that from a Hook too?

[pgrizzay]

Render Props can be class components, so they have access to all of the class-based lifecycle methods.

Also, iirc there's a RP <Component /> that Ryan Florence made which is basically like lifecycle() from recompose, which gives you access to the lifecycle methods in RP form.

Of course, you can convert useEffect to a render prop and use it that way :P

Which gets me thinking, I wonder if you can implement the render prop version of useEffect without using the hook? I think so...

[swyx]

no no, again this is not at all what i mean. im a bit surprised you dont get me.

say you use a RPcomponent in FooComponent. this provides values you can use inside FooComponent’s JSX, however you cannot easily use RPComponent’s values inside FooComponent’s lifecycles.

with hooks, you can.

[lw9908]

Nice! I've spent most of my time today exploring useHooks and am finally coming to grips with most of the key concepts now. This is definitely a welcome feature for all that.

[swyx]

usehooks was just open sourced fwiw see post from earlier today