React Today and Tomorrow and 90% Cleaner React With Hooks

Рет қаралды 1,139,427

5 жыл бұрын

The first three talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.
Learn more about Hooks at reactjs.org/hooks.

Пікірлер: 75

@rayt3384 5 жыл бұрын

44:17 “with hooks we separate code not based on the lifecycle method name but based on what the code is doing” - game changer, Thanks Dan!

@tom201 5 жыл бұрын

love watching dan speak, he clearly loves talking about react and he can explain new features so succinctly. the master.

@motozirillo 5 жыл бұрын

Its not often that you get to experience the same library for the first time twice. Hats off to the React team for their great work

@frewinchristopher 5 жыл бұрын

You can tell by all the people laughing whenever Dan mentions binding functions (and that fact that even he forgets to bind a function) that it has always been a pain point... but hooks will totally remove that boilerplate!!

@WillKlein 5 жыл бұрын

I'm pretty sure that (and other things Ryan did) were part of the performance. Totally well done because that's how it actually goes!

@theleonardowilson 5 жыл бұрын

use arrow functions.

@harryscheuerle4871 5 жыл бұрын

the binding transformation isn't really new, neither is the solution for arrow functions for preserving this.

@Pol-jj7my 5 жыл бұрын

I have the same feeling of excitement watching this than the one I had watching Apple keynotes back in late 00's!

@SolidSnakeBA 5 жыл бұрын

But does it have a battle royal mode ?

@axea4554 5 жыл бұрын

And caravans!

@wnyao 5 жыл бұрын

Great efforts from the react team and react community. Inspiring. 💙👍🏻

@bloodandbonezzz 5 жыл бұрын

I'm hooked!

@jamiekyle5515 5 жыл бұрын

The React team are killing it with Sophie managing. The last year has been incredible for React and it just keeps getting better and better

@DanKreiger 5 жыл бұрын

thanks for this amazing library

@andriirubtsov5404 5 жыл бұрын

Ryan Florence is a fantastic presenter

@mrmupfukudzwa4374 5 жыл бұрын

The React team is the only team in this world that i look at and say...'Damn, i wish i was a part of it'. React really rocks, and its always exciting to see what they are coming up with.

@dulanjala 5 жыл бұрын

nice work... they have been working hard on it...! and they do feel like they are too developers like us not magicians... one of the Greatest Conf I have watch.... Perfect....!!!

@emmanueldalougou7727 5 жыл бұрын

Abramov is a genius a master of React. i thnk that he breathe react

@theuniverse685 5 жыл бұрын

He breathes JS! haha

@emmanueldalougou7727 5 жыл бұрын

@@theuniverse685 hahahahahahaha

@les2997 5 жыл бұрын

He is a great speaker even though English is not his first language.

@lednhatkhanh 5 жыл бұрын

So excited, can't wait to use hooks in react 16.7

@xMrMiagix 5 жыл бұрын

Ryan is killing it! Funny guy

@naythaniel 5 жыл бұрын

This API is beautiful. I really don't know how else to describe it. It's just a gorgeous API.

@sobanya_228 5 жыл бұрын

Algebraic effects FTW

5 жыл бұрын

Bye `class`, might the force be with you

@Deliverant 5 жыл бұрын

19:49 lmao 🤣🤣🤣

@dulanjala 5 жыл бұрын

how little things can make us So Happy...!!!

@devfahim5933 5 жыл бұрын

I loved it :D

@user-oi9mh1uz7o 5 жыл бұрын

Awesome work, but I wonder why not let the the sideEffect function to accept parameters what can be parameters of useEffect so the engine don't need to declare a new anonymous arrow function every render. I know it's not a big problem but it has no harm to current pattern and might have a performance improve about maybe less then 0.1%. Since react is favor of explicitation, then should it be better to explicitly declare what parameters the sideEffect will use instead of reading it from the execution context?

@3ombieautopilot 5 жыл бұрын

Wow it gets a lot loader at around 27 minutes

@heratpatel7174 5 жыл бұрын

I love hooks

@rohan199221 5 жыл бұрын

very similar to recompose

@Pop-zb3wr 5 жыл бұрын

Great talk, I will start using hooks. One point though, electrons don't orbit :)

@UIMLvl3 5 жыл бұрын

What VSC package was Dan and Ryan using during their presentation? 43:03 Is the view I'm mentioning. I like how there is a blur on the existing code, but that the screens are responsive to one another.

@ngyikp 5 жыл бұрын

If you're talking about the blur effect when they resize the browser/editor, that's just the macOS Split View feature

@gavinmeier41910 5 жыл бұрын

React for dayz

@BLOBBERNATOR 5 жыл бұрын

Mind = blown

@IsayanBros 5 жыл бұрын

Tom Holland works for Facebook? Interesting...

@EdZava 5 жыл бұрын

Dan 🥇👏🏻👏🏻

@chasebutterfly4776 5 жыл бұрын

Dan 大神啊

@Nyquiiist 5 жыл бұрын

Anyone know where I could find the code snippets Dan showed off here ?

@boogeyman423 5 жыл бұрын

In the react documentation. They are pretty much the same.

@ln613 5 жыл бұрын

From a functional point of view, I would argue that the 'withState' function from 'recompose' is a better choice than the 'useState' hook, because useState makes the functional component not pure, it takes input from the caller (props) as well as the useState function, whereas withState will merge the state (name, setName) into the props, so the functional component only takes props as input. Also you have to use useState as a statement, so there is no way to write the functional component without a function block (the curly braces).

@jaffreyjoy 5 жыл бұрын

Why was the binding required at 19:51 ?

@Deliverant 5 жыл бұрын

That is just how vanilla Javascript works. You need to bind the 'this' keyword so that when the 'handleNameChange' function gets executed the 'this.setState' inside it points to the "right thing" (the constructor of the class), avoiding that 'undefined' error

@fluttertune443 5 жыл бұрын

Which group is the group of the react in FB mentioned by the first speaker. Can anybody please give me details

@VolodymyrVakulenko-wowkalucky 5 жыл бұрын

So, goodbye class components?!

@TheSETJ 5 жыл бұрын

How is that possible to have a preview embed in the editor like in 17:46?

@roelm9432 5 жыл бұрын

Its not preview in editor, its a browser 34:57

@stelledcom 5 жыл бұрын

It's not embedded. It's just text editor and browser running side by side using macOS split view: support.apple.com/en-us/HT204948

@atulmy 5 жыл бұрын

Is that a racoon in the space at @1:12:31

@dukiwave 5 жыл бұрын

Dan, no amount of Frank Ocean fanboying on Twitter is gonna make me forgive you blowing out my ears at 27:10

@HarrySolovay 5 жыл бұрын

So... is functional setState no longer problematic?

@MichelleCFunk 5 жыл бұрын

What made functional setState problematic? To my understanding it is less problematic than passing in an object

@isaacbrown5845 5 жыл бұрын

I think it's a way too move away from using classes and stay consistent with functional programming.

@raflexs 5 жыл бұрын

Hooks is the future!

@rtorcato 5 жыл бұрын

Why hooks instead of decorators?

@pbouzaki 5 жыл бұрын

Richard Torcato decorators only work on classes.

@TheKingdutch 5 жыл бұрын

@@pbouzaki Decorators work on functions just fine. I think it's mostly about the data flow, the only way into a component is through its props so a decorator would essentially just create a HOC which a hook doesn't do.

@user-oi9mh1uz7o 5 жыл бұрын

To avoid passing local state and shared state down by props. So that props has exactly the same hierachy with view structure. The subscription to shared state and the functionality won't pollute the props. And stateful functionality can be easily reused and tested.

@DominicGo 5 жыл бұрын

Sophie is killin it in that dress 👗💕

@lebroncarmelo1523 5 жыл бұрын

React vs Vue, who is the leader of the future js framework?

@igoldny 5 жыл бұрын

Sophie Alpert is the female version of Dan Abramov

@Grekuz 5 жыл бұрын

is Dan Abramov Jesus Christ reborn? D:

@GilAmran 5 жыл бұрын

Am I the only one that doesn't like these magical hooks? And they hold A global state!?

@roelm9432 5 жыл бұрын

As Dan mentioned, hook is using state the same way how react store your component states.

@elbowdashizzle 5 жыл бұрын

no, state is local to the component

@trixn4285 5 жыл бұрын

They do not hold a global state. When you call `useState` react will create a new state and bind that to your component. You can't access it from somewhere else. That is why you must call `useState` or any of the other hooks unconditionally and in the top level of your component function. React maps the states according to the order they appear in your component. So you have to make sure, the order of calls never changes which is best achieved by statically calling them top level. Also every call to `useState` creates an undependent state. I admit it has some magic how this works but it gets rid of a lot of pain points when working with react in big projects. It allows separation of concerns and an overall better organisation of your code and is less verbose. When used incorrectly it can of course lead to confusion and bugs but in my opinion this is already the case with class based component.