This Framework Does What React Can't

I wish react had the two features I'm going to show you in this video what I'm about to show you is a new framework called quick I'm only gonna show you two features of this new framework though why only two features take a look at them and you'll know what quick does is it takes the features of react that have been well established that we all know and love like jsx for example or the component syntax and applies them in a completely new way in a very elegant manner with what we don't necessarily love from react take a look at how you declare States in react versus in quick it's more performant and it looks better check this out for example this is the way we create a traditional react component by exporting a default function or an arrow function if you want a component that you can call however you want big difference here in quick where we declare a state and then render out some jsx the jsx is an element we will also find in quick components the way we Define a component is fundamentally different though instead of declaring a function we can export default a component dollar sign that we import from at builder.io quick and this takes a callback function instead of being a regular function like a react component and now we get an error because we're not returning anything but if we returned jsx from this component the same way as in react by the way we return jsx then we get a valid quick component and by the way if you're wondering what this weird dollar sign is no this is not jQuery Instead This dollar sign that you can see right here the component dollar sign signals to the quick Optimizer which functions in this application to split up into smaller chunks so we can lazy load each one of them so check out how the state is declared separately instead of taking the traditional react approach with State and set State we can say for example cons store is equal to and now the the syntax is slightly different or the naming is slightly different instead of a use State it's use store that we get from at builder.io quick as well and then here we can pass in the same value for example count 0 as an object that we would in a normal use state in react now let me show you the coolest thing there is about this state so let's render out the store.count the actual value of this object in our case just currently zero on this page and also let's log out that the component rendered first big difference let's put the store dot count inside of a P tag and then let's below that create a button called increment count and what we can do inside of this button is very different from in react we can call the on click dollar sign again for optimized behavior and then we can call an inline function to say store dot count plus plus we can directly mutate the store and take a look at what happens on the browser this is the component we're currently building you don't need to worry about anything else just this component is important right here that you can see on the left hand side if we reload the page there is no console log that this component has rendered right here this console log is not being shown if we take a look at the server side there is a log but only once when this page is rendered is that being logged out if I click on the increment count you can see the count is being updated just normally like in react but the component is not being re-rendered this is not being logged out in the console so the approach that quick takes here instead of re-rendering the entire component with its children like react would instead only this property only this P tag right here is being rendered in you that's all well and good but what about use Effect one of the most important hooks of react it's been well established not necessarily loved and sometimes criticized take a look at the very elegant approach that quick takes in replacing use effect with its own version of tracking changes in certain values and the way we can do that is by using something called use task dollar sign for optimized performance again and what the use task takes is also a callback function and we can destructure two things from this use task a the track and B the cleanup that you also know from use effect let's destructure the track and now we can opt in to track certain value changes for example let's invoke the track with yet another callback function and inside of here whatever we return is the value being tracked so in our case we want to track the store dot count meaning now this use task will run every time the store count changes let's log out count changed save that and go back into our browser and see what happens every time I click increment count now we can see just this function is being run but not because the entire component has been re-rendered or anything but because we have specifically opt it in to this Behavior by using the track function so with these two changes quick looks very promising by no means is it a perfect framework I've tried experimenting with it and because it's in such an early stage it's almost not supported by any major libraries and some of the docs are you know not ideal some error messages when you click on the link that's in there you get to a 404 page which is kind of typical for brand new Frameworks right we can all understand that but it does look very promising and I'd be super interested in hearing what you think about these two hooks that have been replaced from react and quick and how you like their approach and then I'll see you in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 15,208

Keywords: qwik, qwik 1.0, qwik framework, react, qwik js, qwik vs react, builder io, qwik builder io, joshtriedcoding, josh tried coding

Id: YaGJIKF2f-Y

Length: 5min 41sec (341 seconds)

Published: Wed May 10 2023