Это видео недоступно.
Сожалеем об этом.

React Today and Tomorrow and 90% Cleaner React With Hooks

Поделиться
HTML-код
  • Опубликовано: 25 окт 2018
  • 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
    @rayt3384 5 лет назад +380

    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
    @tom201 5 лет назад +301

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

  • @motozirillo
    @motozirillo 5 лет назад +94

    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
    @frewinchristopher 5 лет назад +213

    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
      @WillKlein 5 лет назад +29

      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
      @theleonardowilson 5 лет назад +71

      use arrow functions.

    • @harryscheuerle4871
      @harryscheuerle4871 5 лет назад +1

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

  • @SolidSnakeBA
    @SolidSnakeBA 5 лет назад +690

    But does it have a battle royal mode ?

    • @axea4554
      @axea4554 5 лет назад +6

      And caravans!

  • @Pol-jj7my
    @Pol-jj7my 5 лет назад +86

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

  • @bloodandbonezzz
    @bloodandbonezzz 5 лет назад +233

    I'm hooked!

  • @wnyao
    @wnyao 5 лет назад +8

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

  • @jamiekyle5515
    @jamiekyle5515 5 лет назад +171

    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

  • @andriirubtsov5404
    @andriirubtsov5404 5 лет назад +79

    Ryan Florence is a fantastic presenter

  • @DanKreiger
    @DanKreiger 5 лет назад +21

    thanks for this amazing library

  • @naythaniel
    @naythaniel 5 лет назад +33

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

  • @mrmupfukudzwa4374
    @mrmupfukudzwa4374 5 лет назад +49

    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
    @dulanjala 5 лет назад +14

    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....!!!

  • @lednhatkhanh
    @lednhatkhanh 5 лет назад +5

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

  • @xMrMiagix
    @xMrMiagix 5 лет назад +6

    Ryan is killing it! Funny guy

  • @sobanya_228
    @sobanya_228 5 лет назад +14

    Algebraic effects FTW

  • @Deliverant
    @Deliverant 5 лет назад +49

    19:49 lmao 🤣🤣🤣

  • @emmanueldalougou7727
    @emmanueldalougou7727 5 лет назад +120

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

    • @theuniverse685
      @theuniverse685 5 лет назад +7

      He breathes JS! haha

    • @emmanueldalougou7727
      @emmanueldalougou7727 5 лет назад +2

      @@theuniverse685 hahahahahahaha

    • @les2997
      @les2997 5 лет назад +15

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

  •  5 лет назад +91

    Bye `class`, might the force be with you

  • @3ombieautopilot
    @3ombieautopilot 5 лет назад +38

    Wow it gets a lot loader at around 27 minutes

  • @heratpatel7174
    @heratpatel7174 5 лет назад +5

    I love hooks

  • @dulanjala
    @dulanjala 5 лет назад +20

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

  • @user-oi9mh1uz7o
    @user-oi9mh1uz7o 5 лет назад +4

    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?

  • @rohan199221
    @rohan199221 5 лет назад +8

    very similar to recompose

  • @UIMLvl3
    @UIMLvl3 5 лет назад +3

    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
      @ngyikp 5 лет назад +20

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

  • @devfahim5933
    @devfahim5933 5 лет назад +7

    I loved it :D

  • @ln613
    @ln613 5 лет назад +34

    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).

  • @gavinmeier41910
    @gavinmeier41910 5 лет назад +15

    React for dayz

  • @Pop-zb3wr
    @Pop-zb3wr 5 лет назад +5

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

  • @EdZava
    @EdZava 5 лет назад +5

    Dan 🥇👏🏻👏🏻

  • @BLOBBERNATOR
    @BLOBBERNATOR 5 лет назад +17

    Mind = blown

  • @chasebutterfly4776
    @chasebutterfly4776 5 лет назад +5

    Dan 大神啊

  • @fluttertune443
    @fluttertune443 5 лет назад +1

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

  • @Nyquiiist
    @Nyquiiist 5 лет назад +1

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

    • @boogeyman423
      @boogeyman423 5 лет назад +5

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

  • @IsayanBros
    @IsayanBros 5 лет назад +33

    Tom Holland works for Facebook? Interesting...

  • @jaffreyjoy
    @jaffreyjoy 5 лет назад +4

    Why was the binding required at 19:51 ?

    • @Deliverant
      @Deliverant 5 лет назад +14

      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

  • @TheSETJ
    @TheSETJ 5 лет назад +1

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

    • @roelm9432
      @roelm9432 5 лет назад

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

    • @stelledcom
      @stelledcom 5 лет назад +3

      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

  • @dukiwave
    @dukiwave 5 лет назад +36

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

  • @VolodymyrVakulenko-wowkalucky
    @VolodymyrVakulenko-wowkalucky 5 лет назад +12

    So, goodbye class components?!

  • @atulmy
    @atulmy 5 лет назад +5

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

  • @HarrySolovay
    @HarrySolovay 5 лет назад +6

    So... is functional setState no longer problematic?

    • @MichelleCFunk
      @MichelleCFunk 5 лет назад

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

    • @isaacbrown5845
      @isaacbrown5845 5 лет назад +2

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

  • @raflexs
    @raflexs 5 лет назад +6

    Hooks is the future!

  • @rtorcato
    @rtorcato 5 лет назад +9

    Why hooks instead of decorators?

    • @pbouzaki
      @pbouzaki 5 лет назад +1

      Richard Torcato decorators only work on classes.

    • @TheKingdutch
      @TheKingdutch 5 лет назад +10

      ​@@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
      @user-oi9mh1uz7o 5 лет назад +1

      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
    @DominicGo 5 лет назад +91

    Sophie is killin it in that dress 👗💕

  • @lebroncarmelo1523
    @lebroncarmelo1523 5 лет назад +12

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

  • @igoldny
    @igoldny 5 лет назад +22

    Sophie Alpert is the female version of Dan Abramov

  • @Grekuz
    @Grekuz 5 лет назад +28

    is Dan Abramov Jesus Christ reborn? D:

  • @chrisownz1
    @chrisownz1 5 лет назад +7

    why not just use class components if your trying to make use of states in function components?

  • @GilAmran
    @GilAmran 5 лет назад +18

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

    • @roelm9432
      @roelm9432 5 лет назад +1

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

    • @elbowdashizzle
      @elbowdashizzle 5 лет назад +7

      no, state is local to the component

    • @trixn4285
      @trixn4285 5 лет назад +14

      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.