 Good morning everyone, I was like a very fast train that ran a bit off like so many things at one time. My name is Dripul and today I will be talking about a bit about state of react. Before we start a bit about me, I work at a company called BigBinary and like starting this month I have also starting with a new consulting company called Shailu. I am part of the Rails issues team as in like I work with the Rails team to help growth of Rails framework as well as on the Rails side I also help with the react Rails like the Rails implementation or how to use React within Rails. I run Pune Ruby and React.js meetups as well as I also run these conferences Deccan Ruby content and Ruby Conf India. So I got to know about react around 5 years ago so I can say that oh I have can apply to those jobs which ask for 5 years of x and y, z experience I came to know about it like in 2013 or 2014 or so and during that time while I was learning I wanted to like also document what I was learning different things or it was pretty new at that time and not many people were using it like couple of them like Khan Academy or others were using it. So what I did it I started doing this video series also while I was learning to document whatever what I was trying to like understand from react you can find this it is not visible over here but I will upload this right later but you can still find this. So this is like pretty old and I was trying to get around like okay what all things react is being used about around the same time like as I started using react I also wrote a book about it which was I started using it in many of a client applications and then again what just wanted to get an idea of what various applications react is being used and then kind of documented it in this book. But this is like 5 years ago so please do not buy it. This is based on react 0.14, 0.14 version of react and right now we are about I think we are around 16.8 so this is pretty old like when it was initially when react initially came out so that was a bit about background of like how I got introduced to react and I want to set the set the like agenda of what or whom this talk is about. So couple of things what I want to talk in this is targeted towards if you know react it will be a breather for you like what all has changed in the last couple of years and what is upcoming that you can start looking forward to if you do not know react this gives you a bit of a history so you do not need to know everything I am not going to go too deep into a lot of you know technical I will try to give some examples but this talk is not aimed towards you know learning everything about react it just gives a highlight of okay what all things were there and what has changed kind of a history of what all changed within react in the past couple of years. So react is quite popular today like if you note over here it has I don't know 1.2 1.23 thousand like stars on github so many people trying to follow it on npm it has like 5 million downloads every week so extremely popular right now like many of the big companies Facebook everyone is involved or is using react so it has got like a big developer community right now but when it was introduced the whole idea of react or like when it was introduced it was kind of controversial but what got it a lot of popularity is this concept of virtual dom so basically in 20 30 or 20 12 the only ways to do all like the most popular ways of doing like things which allow react allow us today by libraries like jQuery which you know you hooked into a DOM and then you manipulated it manually based on various events so virtual dom was this concept where instead of touching DOM which is like slower to do like handling or manipulating DOM is always slower build out this whole manipulation within JavaScript compute it and then just send it to the DOM so make the DOM like make whatever interactions you do much faster how many of you have experienced like were using react sorry jQuery 4 or 5 years ago so you know like when you did something like DOM element dot text something I don't know some weird things it used to be pretty non-responsive so that was one of the reasons like why react picked up a lot but why people loved it a lot or like even I love loved it a lot was the whole idea of components so what components mean is like here is an example page from Instagram this is the Nat Geo page so here if you see what there are different parts of the page and your different parts of the page are divided into what are individual components or small units so here if you see this photo itself is divided into like we in one component the likes and the comments and all you can divide a page into small units of small logical units where you display some in some kind of information so it was easier in the world like ok everything that you did during those times were always handling parts of the page some event happening then manipulate part of the page instead of doing that this was a different way of thinking like you compartmentalize different things that you do around the page into small components and then all logic regarding that aspect of that page were you know limited to or you started limiting your thinking towards that component in the beginning like this was beginning for me when I started looking at react so this gives a little bit of idea of what it was then so as I said like I started also creating videos so this was around that time react was basically used via these two libraries that you see like react basic and react with add-ons and they allowed us to do different things so what you did is the component that you see you would define it by using react dot create class and what you did is you pass an object to it which had information like for example in a previous case it had information of how many comments they are or how many likes the image has so that kind of information you would store basically in the state that you see here like get initial state and then basically it had one mandatory method which is rendered so one notable thing that you see here is which was pretty unconventional at that time or was controversial is that we are using HTML from within JavaScript during that time it was more towards you know templating life templating languages being used a lot handlebars and those kind of things so this kind of way of doing HTML from within JavaScript was kind of like pretty controversial when it was introduced so we have a basic component which got created by create class and then you just return what you want to display and handle how or what kind of information you want to display based on the state that you have within the basic component you pass your object that you want to render within create class as well as you could pass external parameters to it by using by making use of props like here you have name being passed as an arguments props and nothing but arguments that you pass to react component before I proceed I just want you to get an idea of how many are like familiar already with react and use it so yeah we had this kind of a structure very basic just have just pass an object and create components and then to actually display it on the DOM you would pass it to render method and you pass the component that you want to render and where you want to display it and this whole thing like that's that's that's it that's the whole component that you have on a page instead of having a big MBC architecture this was mostly only focused towards having the UI part handling the UI parts of it and it simplified like it did not try to do you know interactions between M like model view or those kind of things and just focused on the display acts display aspects of the component so here it also based on these it also allowed us to have like hooks or also allowed us to have view into what is actually happening within the react component so it had a very basic life a life cycle that you see over here it initialized so what happens is like you create that component it tries to mount it on the page which happens during this initialization you set this initial state via get initial state and you get props and then when it actually displays on the page that process is called mounting so you mount the component on the page and actually display it and then based on some external events like user clicking something we have this event of ok updates being happening or we can intercept those events by component should update all these kind of various life cycle methods so these I don't want to focus more on these but just want to give an idea of how the different life cycle was and how basic like it was not too fancy very basic the initialization update and then when you actually remove the component it would just unmounted so around 2014 or 2013 after react was introduced this was the basic way of doing things but around the same time like ES6 or ECMAScript 6 and ES which is like is also known as ES2015 picked up a lot along with that like transpilers like 5 to 6 or Babel got pretty popular and react community in general picked up a lot on using these to make use of a lot of advanced features which ECMAScript 6 gave us. A couple of them were like we started we had JavaScript got classes JavaScript got arrow functions or allowing them to have better use of binding to classes or these kind of various things as well as object restructuring and couple of very other useful things which react kind of found pretty useful to adopt. So after this came into the picture react started to have to start making use of these advanced features so that this already smaller way of doing things like everything being put in a component or using JSX to display the view part of it we could then use these next features which came from ECMAScript 6 to have like even even do the these things in a simpler way. So instead of passing that whole thing to react.create class react got the use of classes. So here if you see we have a basic class which extends react component and that implements on its own the whole life cycle or initialization which has a constructor like if you want to set the state. So it got rid of a lot of the things which which you know kind of a pretty verbose and this was one easy way of you know simplifying the whole component the component already was you know compartmentalized in one single object but this made it like okay are like thinking of the whole component in terms of a class and then here if you see it just required one basic method or one mandatory method which is rendered and then you just return what you want to display on the page again as basic HTML from over here along with this since like if you note over here we are doing a lot of things a lot of things might be done in the class. So since we already had the support of JSX one way of doing things was that we did in in various cases you do not need like a lot of complex mechanism for display like you just need some parameters being sent and based on this parameters just display something do not handle like user clicks sorry do not handle any complex stuff around components. So so during that time stateless or functional components were introduced like you could start doing this simpler way of things like just pass props as a simple function so we started using these arrow methods and then here what you do is you just get the props based on the props you just return basic JSX that's it. So it allowed us to like do like very complex stuff in a simpler way. So that's what about like how things were changing like React was adopting to whole introduction to you know advanced features that the community was like improving around on the whole JavaScript, JavaScript parts of it. So let's take a look at how other things within React have changed around these past couple of years. So what I want to do is like kind of compare what used to be and how you do things now right. How many of you were using React like when this this whole use case was like create class or this was how many people started it way back nobody use others never use create class. So you had this way of doing things you have a app like you pass it create class and you so this is like a change in how you initialize which is when you have some state which is like something which you want to mute it and you maintain something like okay has the user clicked the button or not these kind of things you would put it in the state and then initially you would do it via get initial state wherein you initialize it via something and now what you do is you just get like set it via this dot state within your constructor and then you can set any kind of object over here and the way of changing it is same you just use this dot set state to update like whatever state you want to handle any kind of mutations from that life cycle that we had initially it has now simplified little bit based on the new ways of using it like the whole class way of doing components so instead of instead of those life cycle methods now we have a simplified way of thinking of what is happening within when the component is rendered so we have like the mounting of the component wherein you have the constructor when that we just saw you initialize the state and then it calls the render method when it is trying to display the information and then component did not basically everything is same but just the initialization part that you see it has been more simplified based on the whole class way of doing components how many of you know make sense over here this is for you people so when react started everything was in small parts like you had small components and as applications grew a lot of things was scattered around one way of sharing code like if you had code regarding let's say you have a chat application and you have four different parts of it everyone needs to connect to the back end so when you wanted to share code across components one way of doing that was using mixins so here if you see this is like a basic mixin that you see above what it basically has is just an object of different methods that you want to share across you know multiple components so you would write this basic object which has multiple methods and then what you would do is you would pass it to create class as a mix in the key which is mixed in and then what would happen is those objects sorry those functions would be made available within your new class that you have just created and here you could then pass the same mix into multiple other class like other classes and those methods again would be made available or you could reuse the same functionality over there couple of problems with this approach is that these functions that you see what they do is when you when you put them as mixin they would collide with the existing of the existing methods that you had in the same class or they like over here if you see it's assuming that you know internals state or the object which is created over here it is always available in the class but had some assumptions of how the class was or what was available as well as in big applications it when you started using mixins a lot it introduces a lot of you know dependency on it introduces a lot of unwanted consequences like a lot of bugs so to overcome it a new kind of way of sharing code was introduced or an architecture was popularized around that time which is HOC higher order components so what we do is instead of using the mixins way the mixins were initially used when you know the create react class react or create class way of doing classes was done in the component like class react dot component class way of defining components mixins were done with like they were not supported so the other way of doing this was using HOC over here so basically what you do is you pass a component that you see over here it's a wrapped component and you create a new component within this function so you kind of have a wrapper around your existing component and then you can extend what functionality do you want so here if you see we pass a wrapped component and you're in this you're creating a new class which has some extra functionality regarding like hey it has a it when this component mounts it needs to connect to a data source so it it just has any component that you pass to this will then have access to that data store so instead of always defining this functionality in all components any component which needs it just needs to pass it to this method so this was other way of you know sharing your sharing code in a different way apart from this and then one another way also of sharing information later which was created as a public API is what is context so here if you see what you could do is we create a context and this so that you see at the top and what you do is you wrap it around in a provider and then you pass so whatever you see over here within that tree of the provider you you have access within that whole tree any component which is which is within that provider gets access or is past information regarding to what information is passed by the context so this is useful for you know when you have an application which wants to send state from you have a app which has night mode and you know day mode and light mode and instead of sending every single component on your page you start sending you know light dark theme you just have you just wrap it completely in a provider and then it made is made available to whatever is called within the whole tree so this was another way of you know when you want to pass around state or pass around information to basically get it done in a easier way so that was about sharing of you know like extracting or refactoring or reducing the code that you have across various components I want to move around to now little bit about small small things small small other things so when you have big applications and you pass these arguments to react components from the beginning itself it react allow us to do type checking on those components or let's say over here you're passing some kind of name to the component you would like to have the ability to make sure that hey this component this parameter is actually a string to react allowed us to do that via what are called as crop types so this is also the way that you could still do it today but now you have other things so the ecosystem has matured and then you can use other things like type script or you can use flow to use basically do a lot of type checking one of the important aspects of doing react or the biggest things which was kind of confusing when people started doing react is how or what way to do forms so forms are a basic like important factor of when you write an applications everyone needs to do forms so we react basically did or said that okay these are the basic two ways of doing forms controlled and uncontrolled and then there were tons of other libraries which you know you could use for me so this is an example it's kind of not visible a lot but I just give just give a basic idea about it this is an example of controlled component where in what you do is if you see we have input over here and what you do is you have a handler like here we have an event handler where in any changes which happen to the input they are recorded within our state so in our state we are tracking what the input whatever we are typing within the input and then the same value which is changed which is also gets passed to the value over here so whatever you type first goes to whatever whatever you type first goes to the state of the rear component and then it gets passed down again to the value to actually get this this kind of way of doing it is called control and the other way is uncontrolled wherein you don't have this handler but you can just get a reference or a rep to this particular form and then on submit what you can do is just get the values of the form and the submit so this was very basic way of doing things but people wanted to do like there were tons of other ways that people other things that people wanted to handle like validations or you know complex forms nested forms there were tons of other things that people wanted to do so around that time there were lots of libraries which allowed us to do like form schemas or form validations and it was in like what I would say is like every new project that I did there was a new library which came out and we had to try it out because it got to a point that it was very hard to do things basic things in forms around the same time like Redux came into the landscape and people started using what is called as Redux forms we will take a look at what Redux is a little bit but again Redux form also had its its negative aspect of it is like whatever you did within within a like it within a form it affected like the store that it was attached with and it even today it might not be pretty useful because it affects like whole display of your component and it gets pretty slow we now have libraries like formic which allow us to not do this whole manipulation and instead store sorry do do all like managing of your state of a form at the form level or component level and then just basically do validations over there so you can start using these kind of like libraries like formic to have a better way of doing forms apart from this like when components got bigger or applications got bigger they had a lot of information to be shared from you know the nav bar had some information the putter had some information something that you did in the nav bar needed to affect like the middle part of the page so what you did is you wanted to pass around this state one way of doing this is always using props so you passed props from the higher component parent to the child and back like the other way of doing is something goes something happens in the child you pass a call back to the parent but this was not so easier to do like as your app grew so to handle this or to circumvent this approaches like flux wherein what you have is various parts of the component would subscribe to a store and any changes which happen to the store like you could make changes to the store and then the component it was easier to share information across different components by making use of those stores subscriptions and this was the this was the it was just an introduction of architecture by facebook there was no like official library for it so there were several different you know several different implementations of flux that came into picture like reflux or other different kind of libraries like mob x etc after all these libraries were there like different various ways of doing this date management on the app level but around the same time Redux was introduced which which I think is now you would say that most popular one that people just use so Redux was introduced and it allowed to have a simpler way of you know having one store you can have multiple store but like a simpler way of like thinking of store where you have a non-mutable state and then what you do is you send events and then you get also receive information so basically now if you want you would use all want to have managed it would just use Redux that was on the app level side of it when you have the information and when you want to mutate it or manage a state on the network level or like when you wanted to actually fetch information we were still in we were still like using you know rest or getting information from so so let's say you have a user profile that you want to display and you are just displaying the name over there so on the backend side what you did is you still called the called your backend to get hey give me all the information about the user and it would give you 10 different views so on the network level it was still not so you know well managed or state management around that was not so useful so other things which got introduced were like GraphQL and it allowed us to do things like hey I want information about the user and I only need the user name or I only need say the data birth of the user what I what so this part of the component only needs these two things so instead of getting everything and then storing it in the store and then sending it to the component I could just ask for those two things from the server and then just get response so this was this was allowed to us by making use of like graph and couple of implementations that you have today for these are like Apollo GraphQL or I don't know how many of you have heard of Hasura GraphQL how many of you actually use GraphQL over here by the way so when React came into the landscape during that time so web engines also did not sorry the search engines did not have a good way of you know crawling pages which displayed dynamic content so what happens in react is that okay you display you mount a component it gets mounted and after it gets mounted then you display the content in case of search engines it is not so it was not so friendlier because search engines just crawl a page they do not like they would not get the information which was dynamically rendered so one way of handling it was like rendering on it on the server side and then sending it to the you know sending it to the client that rendered information and then again go to the go to the whole you know life cycle methods so easier way of easier like ways of achieving that were by making use of render to string since basically like react just thought of like react just was rendering of flushing things to DOM it was it also had this thing okay it computed all of those things and it allowed us to export into strings and now you have create react app or things like next JS frameworks where you just where you just get easily level where it's so it's basically out of the box that you can just start using server-side rendering in your applications another things which came also it is like beaver react basically initially was just like parts of the pages were being rendered as you know we didn't have a lot of management of information but then you also wanted to have these apps which manage page back and forth so that allow that was allowed us allowed to us by making use of react router so this allowed us to have like handle page back and forth or based on the parameters of the like URL you could display different components based on the state of the URL bit about testing initially when react landed the only way or the preferred way of doing things were it shipped with a library test utils and what it allowed is like using the render to string sorry using the shallow rendering what it did is you could simulate it being rendered in DOM and then you could verify how it got rendered and then they assert like whatever you wanted to test in in the past couple of years other ways of doing testing has have emerged and what you would do is like something like snapshot testing you would test like what has changed or how the you know how the rendering has changed and then us for those things and then we also have support for these libraries like just an MC when react was introduced it had it also allowed us to do animation which was by making use of the add-ons package in react test utils were also part of the add-ons package and what you would do is you would make use of transition groups CSS and basic react transition groups and what they did is they tracked these animations by by making use of various life cycle hooks so you would they would track like what is changing within the page and then you could hope that if this element is gone or has been introduced to the free introduce some kind of animation now the whole animation is like pretty much pretty much evolved and then we have these libraries like animate or react spring react d3 that you can just use start using instead of using these older ways of doing animation we'll be taking a look at create react app but how many of you already know or use it over here so there was a time before create react app wherein there was no standard way of doing things like there was a whole chaos around what state management to use what kind of you know bundling of application to use what this whole thing of CSS in JS like how do you use CSS within your react applications how do you set up the react router how do you do how do you do server-side rendering does it have to have server-side rendering and there were tons of things which you know pretty much a chaos and what you had is various boilerplate applications that people would just pick and you would just modify it based on your use cases there was also this thing like okay applications needed to be had important like how you know they were used on the server side as well as on the client side but this introduction of create react app from Facebook team kind of was aware that okay there are tons of ways to do things but this is one way and this is now like kind of the most popular or the way that you should just start your creating simple react applications so when you have all of these different components that you're building okay I have very less time so for sharing your different components the team what you would do is so you have you're working with a big team and then you have these components that you want to share like style or button or these what you will do is you would basically now you can basically start using these things like storybook style guided or react cosmos some other stuff which in the last couple of years is kind of notable initially we did this kind of every react component needed to be in one element so we had everything with it if it didn't fit anything you just wrapped it in a div but now you use react fragments which allowed us to get rid of that unnecessary divs react has also introduced portals initially it was like if you wanted to display models you would just get a reference to something outside of react now these allow us to have a better way of displaying models in the react react display life cycle this was introduced a couple of while back wherein in the in the previous cases what you what used to happen is something went wrong in react it would just throw an error hey something went wrong in rendering and it would just give a big trace which was initially it was not kind of useful but now what you can do is you can define catching off you can still use try catching other parts of the component but during rendering if something was wrong what you could do is you could use these two methods get derived straight from or component ditch did catch if you have these two methods if something was wrong during rendering react will call these methods and you can easily handle you know any like you can catch error handling on these methods and then if you can manage state of ok something has been wrong and then appropriately take action of what you want to display some again this was a lot of things which have changed now a little bit of what is upcoming or exciting that you should look forward to hooks were introduced like last year or so how many of you have already seen or know what hooks are a lot of people so we saw like how Hocs were and how they allowed us to abstract information or like you know there are different ways of you know different ways of sharing or extract like abstracting information but in a big application that can that can get kind of like as it gets bigger it is kind of not like easier to do also like when you have logic which is shared across the whole application it tends to get quite complex as well as when you have these class-based components they get kind of harder to understand so it's not so easier to do in like as your applications grow to have those kind of things so yeah now as introduced hooks wherein what you do is they allow us to do the same state management that we did previously via this dot state in inside or outside of classes and they allow us to do it within like simple functions so here I have a simple function which is using these use state and use effects these methods from hooks which allow us to do the same functionality like state over here if you see use state over here is just like similar to this dot state which was before and we have use effect over here which is same like the life cycle method that we have previously so here we are again doing the same thing like if something goes wrong use set count as well as you know if on something being changed or render it calls the use effect method so these are simpler ways now of doing these like other things are like code splitting which has been introduced a lot of time but I can discuss it later again and then other other pretty exciting again another thing is concurrent react wherein instead of always doing asynchronous rendering react now does time slicing and prioritizes what it does in the in the whole renders and eyesight all right I think out of time but that's about it