React Today and Tomorrow - Sophie Alpert and Dan Abramov - React Conf 2018

[Music] [Applause] hello everyone welcome to react calm I'm really excited to be here I'm really excited for the stuff that we have to announce for you this week my name is Sophie Alpert I Sophie bits on the Internet I manage the react core team at Facebook by any manager that you use react is doing great our NPM downloads are up 70% year-over-year the chrome dev tools extension for react dev tools has been installed by one and a quarter million developers and I can show you this list of companies that's using react although at this point it's so long it's kind of hard to tell how much it changes each year for another point of data we can look at Google Trends which shows web search traffic so it searches for react continue to go up hopefully that means more people are using react not that it's getting more confusing but for a point of comparison we can look at a trade query which we have just passed for the first time in history but this also shows that we have a lot more room to grow I was procrastinating when I was writing this talk so I was curious to see what else react is more popular than whoops spoiled my joke but react is more popular I found out than renewable energy it's also more popular than orange juice just think about how common orange juice is right and not only that it's more popular than renewable energy and orange juice put together so I think we have a lot to be proud of but but enough about these numbers what I really like to talk about today is our mission would react ever since react was released in 2013 our overarching goal our primary mission has been to make it easier to build great UIs and so when we're adding new features we always try to be very deliberate we want to consider a bunch of things when deciding whether to add a new API if it makes it possible to do something you couldn't do before if it can dramatically simplify the code around react in your components and libraries so that you all have less work to do and users have less code to download that's a win or if it helps encourage best practices like code splitting if we make it easier to code split your app into multiple bundles then our hope is that your apps will end up being faster so that's why we add things like react dot lazy which we announced two days ago you might have seen it but thinking about this mission make it easier to great to build great UIs there are a lot of different ways that we approach this one way we do this is trying to simplify things that are hard if you saw Dayton Dan Abramov stalk from JS conf Iceland then you saw a sneak peek at suspense which is our idea about how to dramatically simplify what's required to do data fetching code splitting and any kind of async data dependencies in your app now another way we try to improve react is by focusing on performance if your app runs faster your users are going to enjoy using it more conversely if your is laggy if your app is janky then there your users aren't gonna have a great time so we try to spend time on making react itself faster because if react is faster out of the box you all need to spend less time optimizing your own code one recent performance related effort that Dan also talked about in Iceland as what we call time slicing this is going to let you make sure that the most important renders in your app are processed first in order to unblock the main thread and make your apps faster and a third angle that we approach our mission from is developer tooling to help you debug and understand your app from the start react has included developer friendly warnings to help point out problems before you might otherwise notice them and we've had the reactive tools extension which lets you inspect and debug your component trees and in react 16-5 we introduced a new profiler it's a second I don't know what's up with this clicker a second tab their profiler tab that helps you understand what's happening in your app and optimize it so suspense time slicing and the profiler are three of the new features that we've been working on over the last year we're really excited to tell you more about them but that's actually not what I'm here to talk about you're gonna have to wait till Andrew and Brian's talk tomorrow morning to hear about that today I want to take a step back and focus on something else what I like to ask is what in react still sucks and I have three problems that I would like to talk through the first one is reusing logic between multiple components in react our main building block for our applications is a component and components form the foundation of the two main patterns for sharing code in react apps between components which are higher-order components and render props both of these patterns are great for some cases but they also come with a significant downside you need to restructure your app anytime you want to pull one of these in and more complicated examples this leads to what I call wrapper hell most of us have seen component trees that look something like this and the the nesting you end up with makes it difficult to follow the data flow through the app it would be really nice if there was some way to reuse this sort of stateful logic without needing to change the component hierarchy right the second problem I would like to talk about is a giant components whose logic is just sort of a tangled mess when you look at a thousand line react component chances are the logic is going to be split across a lot of different lifecycle methods in a way that's pretty difficult to follow let's look at an example let's say we have a class component and in its component did mount method it does a few different things it subscribes to a datastore it sends off a network request and it starts a timer well if we look at the component we'll unmount method then we're going to see basically the exact three opposite things it needs to unsubscribe from the store it needs to cancel that Network request and it needs to stop the timers and when it comes to implementing component did update the logic tends to get even trickier because you need to compare the old and new props and and and also mirror it again the same tasks that you have in your other lifecycle methods in this example each call here is just one line so this is actually a lot simpler than what you normally see in your components in real-world components you often end up with an even more tangled mess because each each individual task has to be split across different life cycle methods that makes it hard to tell if for instance you forget to clean up one of the resources when you're unmounting your component it's pretty hard to see that from the code and the third thing that sucks is the class understanding classes in JavaScript can be pretty tricky and today we require you to use class components in order to access state and life cycles if you've ever taken a function component and converted it to a class to add some state you know that there's a fair amount of boilerplate that's required in order to just define a class component most beginners and many experienced devs also tell us that the way binding and this work in classes is pretty confusing it's annoying to have to think about and we also frequently hear that people don't exactly know when to use function components partly because there's always this fear that you're gonna have to convert it to a class later anyway and so you're like should I should I do it now I don't know and so I claim classes are hard for humans but it's not just humans I claim the classes are also hard for machines if you ever looked at a minute ID component file you'll see that all the method names are still unmanned that if you have a method that's completely unused it doesn't get stripped out that's because it's hard to tell at compile time exactly how all the methods fit together we also found that classes make it difficult for us to implement hot reloading reliably and finally when we were prototyping an optimizing compiler to improve the performance of react components we found that classes can encourage some patterns that make it a lot harder for compilers to optimize so here are the three problems that we have reusing logic giant components and and classes so reusing logic because you often end up with this wrapper hell giant components because you have the logic split across different life cycles and classes which are difficult for both humans and machines so we think we have a solution that can help with all three of these we're really excited to share it with you to tell you more about it I want to welcome up Dan Abramov [Applause] hi my name is Dan I work on the react team and this is my first time in three account [Applause] and so so if we talked about these problems that I think most of you have encountered in react development and of course we could approach these problems one by one so we could try to solve them in isolation but it seems like solving one of them makes some other one worse so for example if we try to solve the rapper hell by putting more logic into components themselves then our components become larger and harder to refactor and then on the other hand if we try to split the components apart into smaller pieces and reuse those then we end up with more nests than in the component tree and we get the rapper hooligan and finally in either case we have all the confusion that comes with the classes so we think that this is because these are not three separate problems we think that this is these are three symptoms of one problem and the problem is that react does not provide a simpler smaller lightweight primitive to add state or lifecycle than a class component and so once you add a class component you can split it up further without introducing the rapper he'll and in fact it's not a new problem so if you used to react for like more than a couple of years you might remember them when react came out it actually included a solution to this problem it was mix sense so mix-ins allows you to reuse some methods between classes and this way you wouldn't have all these rappers so should we add mix sense back to react that's right no no we're not gonna do that I mean the codes user make sense the rounds it's not like it's not broken but we don't encourage using mix-ins and react and if you curious why there is a blog post that we wrote code called mix-ins considered harmful on the react log where we explain that we think in our experience the problems that mix-ins create are worse than the problems that they solve so that's why we don't encourage these mix-ins so perhaps we could just can't solve this problem maybe it's inherent to the react component model maybe we should just accept it or maybe in there is a perhaps there is a different way we could write our components that doesn't suffer from either of these problems and that's what I'm going to talk about today but before I start I want to touch a little bit on the way we approach making changes and additions to react which is a year ago we set up an RFC process so RFC stands for request for comments and it means that whenever we want to make or somebody else wants to make a substantial change or addition to react they need to write up a proposal with detailing the motivation and the detailed design of how this will work and so that's what we're going to do we're excited to announce that we are ready to present a proposal for how we can solve these three problems and importantly this proposal does not have breaking changes or deprecations in it it is strictly additive it is opt-in and it adds some new api's which happens when you try to solve problems and we would love to hear your feedback on this proposal which is why we're we're going to publish it today and we thought about many ways we could share this proposal so maybe we just like right off in there write up an RFC and post it but since we were going to run react Kampf anyway we just decided to to show it here and we're gonna do a demo with the mirrors the displays sorry technical glitch can somebody who understands projectors help me can I make it mirror my desktop please yeah okay but it doesn't show on the screen I don't see anything that's that's the problem that I had okay disaster averted alright um let me check the font size a little bit deceitful alright so here is a simple react component that just it is a row this is just some styling and it it renders a person's name and so let's say that we want this name to be editable so how do you do it in react normally well like if we want to add an input there we need to return this component into a class add some local state to it and let that state drive the input so that's exactly what I'm going to do that's what we do today so I'm going to do the expert default class greeting extends react component and so I'm going to use only stable JavaScript syntax so constructor props super props there is the state going to initialize name to Mary here and I'm going to declare a render method and copy and paste this sorry okay and so I want this to be instead of just rendering the name I want the surrender and input so I'm replacing this by an input and the value of the input is this that state that name and if I make a change I want to call this dot handle named change that's going to be my change color and I'm going to declare it here when the name changes we call says state like we normally do and we set the name to eat at target dot value right so now if I edit the okay so I I need to bind sorry I need to find the events on there okay so now I can actually edit it and it works so a familiar class component is if you work with react you probably write a lot of those but let's take a step back what if we didn't have to write a class when we wanted to use state so I'm not sure how that's gonna work but I'll just start with what I know I want to render an input so I'm gonna put an input here and the input has a valley and that Valley is the current name so I'll just pass name I don't know where to get name from so it doesn't come from props I'll just declare it and I don't know I'll fill it in later this is gonna have a change down there as well so I'm going to declare unchanged handle name change and I'm adding a function here takes an event and then here I want to tell react to set the name to something but again I'm not sure how to do that from a functional component so I'll just call something called set name with the current input value and I'll just upload it here all right so these two things they're closely related right so one of them is the current value of the name state variable and the other is a function that lets us set the name state variable and so because these things are closely related I'm actually going to put them together as a pair of valleys so I'm going to get them together from somewhere so where do I get them from from react local state so how do I use react local state from a function component well what if I could just use state and past the initial state to specify it and see if this works yeah it works [Applause] so let's let's compare the two approaches so on the Left we have a familiar class component this state has to be an object we bind some event handlers so that we can access this inside the event handler for this that's a state when we call says state it actually doesn't just set the state that merges the state are the argument into the state object and then when we want to access the state which it is that state and that's something so in the example on the right we don't need to access this that stayed at something because the name state variable is already available in the function it's just the variable and similarly when we need to set the state we don't need to access this that's something because the function that lets has said the name is also available in the scope so what is use state exactly your state is a hook a hook is a function provided by react that lets you hook into react features from your function components and you stayed is the first hook that we're going to take a look at today but there are a few more so we're going to see them later all right so let's go back to our Familia a class example so let's say we wanted to add a second field for example for a surname so the way we normally do this is we add another key to the state and we I'm going to copy and paste this role it's gonna say surname now it's going to render surname and handle surname change when I copy and paste this event handler this will be surname and I need to bind it okay MARY POPPINS so we can see that it works so how do we do the same with hooks so one thing we could do is we could make our state an object as you can see that the state with hook state doesn't have to be an object it can be any primitive we could make it an object if we wanted to but we also don't have to so conceptually surname is is not closely related to state to the name so what we could do is we could declare a second state variable by calling the you state crook again so all declare surname I can give it any name it's just the variable in my code and sets her name by calling you state and passing the initial state for that state variable poppins so again government gonna copy and paste the row say in surname the valet surname handle surname change and when the user edits the surname not sir name we want to set the surname let's see if this works yay it looks like it works so we can see that we can use hooks more than once in a component let's compare the two approaches in more detail so on the Left familiar class component state is always an object has multiple fields McCall says state will merge some something into that object and then when we want to access it we do this that state there's something on the right in the example using hooks we use the state hook twice and that declares two state variables name and surname and whenever we call set name or set surname this tells react that it needs to re-render this component just like if we called says state and so the next time reactor renders our components is going to pass the current name and the current surname to our component and then we can use it directly without accessing this that state that's something all right so let's go back to our class example what else what are other features of reactor we know so another thing you might want to do from a component is to read context so context in case you're not familiar it's like kind of like global variables for a subtree so it's useful for things like read the current theme like visual theme or the current language that the user is using and it's useful to avoid passing everything through props if you need all components to be able to read some value so we're going to import theme context and local context which I already declared in another file and the API you've probably most familiar with for consuming context especially if you have to consume multiple contexts is the render prop API and it looks like this so I'm going to scroll down here so we can choose theme context consumer that gives us a theme in my case it's just going to be a CSS class so I copy this all this code inside the render prop and I'm going to use class name equals theme all right very old-timey and I also want to show the current language so I'm going to use local context consumer and it's going to render another role so I will copy and paste this role can I say language language and render it here okay we can see that context works and that's probably normally consume context we actually added a more convenient API for accessing it in classes in 1606 but this is how you can see multiple contexts so let's look at the at how we could do this with hooks so as we said that state is a fundamental feature of react and this is why you can use state and so if we want to use context I need to import my contexts so this is gonna be a themed context local context and now if I want to use context from my component I can use context and then to get the current theme I can use context same context and to get the current locale I can use context local context and this doesn't just read the context it also subscribes the component to updates to this context but it just gives me the current values so I can I can put it into my CSS class name and I can add the bro first language and I can put it here all right so let's let's compare the two approaches so this is the traditional kind of render prop a bi it is very explicit about what it's doing but it does get a little bit nested and you encounter this not just with context with with any kind of render property P I so with hooks it does the same thing but it's flat so we just say we use this context in this context and we get the theme and locale and then we can use them so you might be wondering at this point how can react possibly know for example I have this to you state calls so how does it know which state variable corresponds to which you state call and the answer is that react relies on the order of these calls this may be a little bit unusual and in order for this to work correctly there is a rule that you need to follow when you use cooks and the rule is that you cannot call hook inside a condition it has to be at the top level of your component so if I do something like if props condition and then I call the you state hook here we actually have a linter plugin that is going to complain that this is not the correct way to use hooks and we realize that this is an unusual limitation but it is pretty important for hooks tour correctly and also to enable certain things that I think well you will like that I will show a bit later all right so let's go back to our class so the other thing you might want to reach for the class for is lifecycle methods so the most commonly use case for lifecycle methods is you want to perform some side effect such as firing off request performing some kind of imperative Dom mutation interfacing with the browser api's so you might want to do something like this and you can't do during rendering because it's it's not rendered yet so the way you do side-effects and react is you declare a life cycle method like component in mount and then let's say that if let me show this so you see at the top of the screen it says react up so there is actually a browser API that lets us update this so let's say we want the tab title to be the name of the person and change it as I type and so to set it initially I'm going there is a browser API to do this is documented title equals this that stayed that name was space was this the state that's her name so now we can see it's as Mary Poppins but then if I if I edit it it doesn't get automatically updated because I also need to implement component it update for the for the side effects to be consistent with what I rendered so I'm going to declare a component it update and just copy and paste this all right so now says Mary Poppins but if I started editing it the document title updates and this is how we perform side effects in a class so how do we do this with hooks well the ability to perform side effects is another core feature of react components so if we want to use an effect from our component make an import use effect from reactant and then we want to tell react what to do after react has flushed our components to the Dom so we pass a function which is where we perform our effect so I'm going to say document the title equals name plus space plus surname you can see it says Mary Poppins here and if I start editing it actually updates so what default use effect runs both after the initial render and after every update so by default it is consistent with what he rendered and you can opt out of this behavior if like for performance reasons and/or if you have special logic and reinstall after me will touch a little bit on this so let's compare DG approaches so in the in the class we divide method we divide the logic based on lifecycle method names so this is why we have component adnan component it update they fire at different times and we sometimes repeat some logic between them we could extract it to a function but still we would have to call it in two places and remember to keep it consistent and with with the effect hook the effects are consistent by default although there is a way to opt out of that and not is that in the class we need to access this that state so there needs to be special API to do this but in the effect example we actually don't need a special API to access the state variable because it's already in this code of the function it is declared right above and this is why the effect is declared inside the component rather than they rather than outside because this gives us access to state variables ability to set them and anything else like the current context value for example or any of these contexts all right so let's go back to the familiar class example another thing you might want to use life cycle methods for in a class is subscriptions so maybe you want to subscribe to some kind of browser API and it gives you some value for example the window size and you want to update the state in response to changes to this value and so the way we could do this in a class let's say that we want to that we want to monitor the window width so I'm going to put with interstate this window in there with browser API and I want to render it let me copy and paste this so this is gonna say width and I'm going to render it here it is that state that width this is the width of the window not with of Mary Poppins and I'm going to add a I'm going to add in event listener so we need to actually listen to changes in the width so at window dot event add event listener I'll I'm going to listen to the resize event and the resize and I need to declare this event and so this is where we're going to update the width state to be window that inner width and we need to bind it and and I also need to unsubscribe so I don't want a memory leak with like keeping these subscriptions I want to unsubscribe from this event so the way we do this in a class is we create another life cycle method called component will unmount and I'm going to copy and paste this logic here except this will be a remove event listener so we set up an event listener and we remove the event listener and we can verify that this actually works by dragging this you see the width is changing so it works so let's see how could how we could do this with hoax so conceptually listening to the window width has nothing to do with setting the document title so that's why we're not gonna put it in that effect it's conceptually completely separate effect and just like we could use state more than once to declare multiple state variables we can use effect more than once to perform different side effects so I want to subscribe to window add event listener resize handle resize and I'm gonna need to keep some state for the current width so I'm actually going to declare another state variable so I'll say with and sat with we get them by using state with window inner width as the initial value and now in my handle resize function I'll just declare it here because it isn't used anywhere else and it's going to set with tree to the current width I need to render it so I'll copy and paste this row gonna say with and finally I need to clean up after this effect so I need to specify how to clean up and again conceptually cleaning up is part of this effect so this effect has a cleaner place and the order you the way you can specify it is that any effect can optionally return a function and if it does return the function then react will call this function to clean up after the effect so this is where we unsubscribe ok let's just verify that this actually works yay so let's compare the two approaches on the Left we have a familiar class component nothing surprising there we we have some side effects some related logic is split apart so we can see that document title is being set here but it's also being set here and then we subscribe to an effect here sorry subscribe to the event here but we unsubscribe here so these things need to be in sync with each other and then this method contains two unrelated method two unrelated lines so that me in the in feature make it a bit difficult to test them in isolation but it looks very familiar so that's this nice so this code probably looks less familiar but let's take another look at what's going on here in with hooks we separate code not based on the life cycle method name but based on what the code is doing so we can see that there is one effect which is we updated document title that's one thing this component can do and then there is another effect which is subscribing tree to the window resize event and update in the state when it changes and this effect has a cleanup phase which means that when it's time to remove this effect react removes it and avoids the memory leaks and if you've been carefully watching you might notice that since effect run after every render we're just gonna keep resub scribing so there is a way to optimize this so default is to be consistent which is important if you for example use some prop here I need to resupply from props or something similar but there is a way to optimize it and opt out of this behavior and Ryan in the next talk will mention how to do it all right so there is one more thing that I want to show here so this component is getting pretty large and it's fine so we expect that since you now can do more in function components they will get larger and that's totally okay but you might want to reuse some of that logic in other components or extract it or test it separately what's interesting though is that hook calls they are just function calls and components they are just functions so how do you share a logic between two functions you extract it to a different function that's what I'm going to do you're going to copy and paste this and I'm going to create a new function called use window with I'll just paste it here and so we need the width in our component in order to render it so I need to return it from this function which is the current width and then I can go back off and I can say Const with equals use window with so what is this function we didn't do anything special we just extracted the function but there is a convention here so we are calling this function a custom hook and by convention custom hook names always start with use and so there are two reasons for this we're now giving two like read your function name or to string it or anything like this but it is an important convention because first of all this lets us lint automatically for violation of the first rule that I described about : hooks unconditionally so if we didn't know if something is a hook then we wouldn't be able to do that and another reason is that if you just look at the component code you kind of want to know if some function can have some state inside of it so it's important that there is a convention and see okay use something it means that it's potentially stateful and here with gives us the current bits and subscribes us to updates to it so if we wanted to we could even go further it's probably not necessary in this example but I just want to give you like a sense of water you could do so let's say like maybe setting the document title was a bit more complicated and you wanted to like extract it or test it separately so I could just copy and paste this and I could write a new custom hook I'm gonna call this one use document title and so the name and surname don't really make sense in the Scopes context we just want to call this title and this is going to be an argument so custom hooks are JavaScript functions so they can take arguments and return values or not return so it is going to take title as an argument and now in my component I can say use document title name plus surname in fact I could go even further so in this case is totally unnecessary but again maybe our inputs were more complicated maybe we were tracking whether the input was focused on blurt whether it has been validated submitted and so on so maybe we had some more logic there we wanted to pull it out of our components and reduce duplication and there is already some duplication so we have this like almost identical event handlers so what if we could just I'm going to delete one of them and extract the other one I'm going to create a new hook that I'm going to call use form input so this is my change handler now I'll also copy and paste this declaration so this defines the state for this input so it's no longer name and set name I'll just color generically value and set value it's going to take the initial value as an argument and this is just going to be a handle change and this will set value so what do we want to get in order to use this user name put in our component we want to get the current value and a change handler these are the things that we attach to the input so let's just return them return value and unchanged handle change so now if we go back up we can say name equals use form input Mary so name is going to be an object with valley and non change fields and surname is use form input Poppins so this is now going to be named at Valley and surnamed at Valley because this is where the string is and so now I can remove this and I can spread over the name object someone is laughing alright let's just verify it and break it yeah it works so each time we call a hook it's state is completely isolated and this is because we just rely on the order of who calls and not on names or anything so you can call the same group multiple times each call will get its own local state so let's compare the three approaches for the last time so on the Left we have a familiar class component it has some some state in an object bind some methods has some logic spread across different lifecycle methods has a bunch of event handlers uses uses some things from the context and render stuff pretty familiar and on the right pane this may not look like the react components were used to but it kind of makes sense even if you don't know how these functions are implemented you can see okay it uses three form inputs uses some context to get theme and locale it uses the window width and document title and it renders a bunch of stuff and if we want to we can scroll further and we can see okay so this is how the input works this is how it said in the document tile works this is how the window width suppression works oh maybe this could be an NPM package and you don't actually need to know that all we could pull it back into a component or copy and paste between components so hooks give you custom hooks give you the flexibility to create your own abstractions that are not they do not inflate your react component tree and avoid the wrapper hell [Applause] and importantly these are not two separate applications so this is actually one application so I have this window open just to demonstrate that classes can work side by side with hooks and while hooks represent our vision for the future of react we don't want to make breaking changes like this so we need to keep classes working let's go back to the slides all right now this is a slider you can actually tweet we present the Hookes proposal to you today Hookes led to use all react features without having to write a class they do not deprecated classes but you have the option to not have to write them we intend to cover all use cases for classes with hooks as soon as possible there are a few that are missing but we're working on them and hooks lets you reuse stateful logic extracted out of components tested separately reuse it between different components without introducing the wrapper hell and again importantly it's not a breaking change completely backwards compatible strictly addition additive and you can find the we wrote the documentation for hooks so you can find it at this URL and we want to hear from you the react coming in to you when I hear what you think about hooks whether you like them or not and we realize that it's pretty hard to give feedback without actually trying them so we built them and we released sixty sixty and seven alpha it's not a major release it's a minor release but in alpha where you can try hooks and we've been trying them in production at Facebook for about a month so we don't expect major bugs there but the api's themselves may change together with your feedback and I asked you not to rewrite anything like not to rewrite their whole apps and hooks because first of all it's it's a proposal and second because personally I I find that it takes a bit of a mind shift to start thinking in hooks and it might be a bit confusing if you try to just take a class component and convert it but I do encourage you to try using hooks and some of the newer code that you write in and but it's not what you think so thank you [Applause] so in our view hooks represent our vision for the future of reacting but I think they also represent the way we move react forward and that is we don't do big rewrite we want the new patterns that we like better to coexist with the old patterns so that we can have gradual migration and adoption just like you can gradually adopt react itself and this is almost the end of my talk I want to end it on a personal note so I started learning react about four years ago and one of my first questions was why JSX but my second one of the next questions was I can figure out what does the logo have to do with react so the project is not called Adam it's not a physics engine so one interpretation is that it's kind of upon on reactions so atoms participate in chemical reactions reactions react but it's not a flame with react actually Gotti I found a different interpretation that made more sense to me and the way I think about it we know that physical matter consists of atoms and we've learned that it's the types of these atoms and their properties that determine how the physical matter looks and behaves and react has taught me something similar that you can take a user interface and you can split it into these independent units called components and it's the types and properties of these components that can describe how the user interface looks and behaves what's ironic though is that the word atom it literally means indivisible so when scientists just discovered atom for the first time they thought this is the smallest thing we're gonna find but later they discovered an electron which is a smaller particle inside the atom and it turned out that actually electrons explain a lot about how atoms work and I kind of feel the same way about hooks I don't feel like hooks are a new feature rather I feel that hooks provide me with access to react features that I already know such as state and context and life cycle and I feel like hooks are a more direct representation of react and that they really explain how a component works inside and I feel like they've been hiding in plain sight for four years and in fact if you look at the react logo you can see those electron orbits there so maybe hooks have been there all along thank you [Applause]

Channel: React Conf

Views: 76,165

Keywords:

Id: V-QO-KO90iQ

Length: 58min 20sec (3500 seconds)

Published: Sat Oct 27 2018