any reasonable developer in today's world would learn react because it's the status quo and that's where the jobs are but life is a lot more fun when you become unreasonable and go against the status quo to push web development forward for future Generations in today's video we'll compare react and spelled side by side by looking at common patterns and design choices by the framework creators I'm not here to tell you that one is better than the other because that's what the comment section below this video is for the only way to truly find out which one is best is to build something with both of them and decide for yourself I just released a brand new full spell kick course yesterday and also have a full next js13 course for fireship pro members going through each one of these courses will give you a really good idea of which framework is best for you first up we need to talk about rendering both of these Frameworks do the same thing they help developers build reactive uis with JavaScript by organizing code into reusable components an end user would never be able to tell the difference between the two but when it comes to the developer experience there is a world of difference react.js uses a runtime called the virtual Dom it keeps track of data changes in the application in order to render them in the act actual Dom in the browser the drawback is that this runtime requires some initial JavaScript and in Frameworks like nextjs your Baseline is around 70 kilobytes just to render a hello world as felt on the other hand takes an entirely different approach using a compiler to eliminate the need for a runtime it takes your svelt code and converts it into vanilla JavaScript which results in a far smaller hello world using a compiler though is kind of like cheating react.js is just JavaScript whereas spill can take non-javascript code to allow developers to do things more efficiently than they could otherwise but some JavaScript fundamentalists might consider this black magic what's ironic though is that vanilla JavaScript libraries tend to be much easier to work with in spell when compared to react however react does have a massive ecosystem of dedicated libraries to help you get things done now let's look at an actual code example of component State here we have a basic counter app in react we use functions to create components and then add reactive state to them with the use State hook that returns a reactive value and a Setter function to update the state pretty simple but let's see how it compares to svelt here on the right side in spelled you have only one component file and Define the logic within the script tags to create reactive State all you do is create a variable with the let keyword from there we can define a function on the click event that mutates the value directly the spell code is able to be more concise because it doesn't require any Imports or function calls to initialize the state it looks and feels like vanilla JavaScript but that's just an illusion so now let's look at how props work between the two Frameworks to pass props and react we do so by defining them as function arguments which are typically destructured like so in spell things look a lot different putting the export keyword in front of a variable allows it to be passed in from the outside on the other side using props looks basically identical in both Frameworks although spelled does use some syntactic sugar allowing you to more easily match variable names to props when it comes to props though one thing you can do in react that you can't do in svelte is pass components as props and that brings us to our next comparison children in react because we can pass components as props we can render them directly in the jsx in addition if we want to insert UI inside of a component we can use the built-in props.children value you now in smelt we have an entirely different system called slots the default slot is the equivalent to props.children however you can also create name slots that allow you to insert UI at specific points in this component's markup that gets the job done but I do kind of miss the ability to use components as props and so now let's look at how we might run code when a component is initialized in react we have the use effect hook which takes a callback function followed by an empty array to signify that it doesn't have any dependent data so it only runs once in svelte we have a similar pattern with the on Mount function it's more readable but more importantly it can handle an async function which is not possible in react which means you need to jump through this extra hoop of defining your own async function that's separate from the main callback but now we're going to see a much bigger Divergence between these two Frameworks with side effects and computed state in react we can create a side effect with the use effect hook again that updates the document title anytime the count changes we just need to tell it to watch the count by putting it in the dependencies array in svelte we have an entirely different mechanism called reactive declarations that start with a dollar sign and a colon this looks kind of weird at first but what it telespell to do is Rerun the code whenever any dependent data changes in this case the compiler knows that this code is dependent on the count value therefore it updates the document title whenever the value changes not only is it more concise but it also tends to be more reliable than react because it's easy to screw up the dependencies array and get unexpected results that are hard to debug that's just one of the reasons they call it useful gun but we can also use reactive declarations for computed state in react you can easily create computed state by simply defining a variable that's dependent on some State the problem is that this code will run every time this component is re-rendered therefore if you have an expensive computation you'll need to wrap this code and use memo and once again tell it explicitly which data it depends on this will cache or memorize the value between renders in svelt you don't even have to memorize the word memoize we can just use the same reactive declaration as before to define a new variable again it automatically knows to only run this code when the count changes that's pretty cool but now let's look at some differences in templating starting with conditional logic react uses jsx where you put your HTML in your JavaScript whereas spelled has its own templating approach where you bring JavaScript into your HTML jsx is one of react's great Innovations if you like some of the ideas of svelte but don't like its templating system a good alternative is sola.js which is kind of like react with a smelt style compiler when it comes to conditional logic and react we can't directly use an if statement because a function component needs to return a JavaScript expression that represents a single value to represent a basic if-el statement or true false situation we can use a ternary operator and represent everything with a single line of code now remember smelt uses a compiler which means it can come up with any kind of templating magic that it wants to it allows you to create if else statements in the HTML very similar to how you would in normal JavaScript it's a bit more verbose but more readable in my opinion and the readability is very noticeable when you have multiple conditions like an if else statement because in react you'll occasionally see nightmare code like this of nested ternaries although there are better ways of doing this like extracting the logic to its own dedicated component and now let's take a look at Loops the most common way to Loop and react is to use the map function on an array this allows you to define a callback function that Returns the UI for each item in that array in addition we can make it a key Loop by adding a key prop to the child in Silt we can Loop over an array of data within each Loop it creates a template variable for each item and then we can use its data inside the tags you make it a key Loop we can add parentheses with the value for the key inside of the each block now let's switch gears to the big complicated topic of shared State like how do I take one reactive value and share it throughout the entire component tree react doesn't really have a primitive way to do this out of the box and you'll typically need to bring in a state management solution like mobx or Redux or my personal favorite Joe Tai which means state in Japanese with Joe Tai we create an atom to represent a value then in one or more components we can use the use atom hook to access that value instead of using the built-in use statehook and react we can now use that state in multiple places because it's been decoupled from the component spelled has a similar mechanism built in called stores which are very similar to observables in libraries like rxj s we can create a writable store to represent a value what's crazy though is that we can then subscribe to the value of that store inside of any component both in the templates and in the JavaScript all we have to do is put a dollar sign in front of it thanks to the magic of the compiler as a spell user myself I can't even begin to tell you how much complexity and code this one little mechanism will eliminate from your code base it allows you to use reactive data throughout the entire application with surgical precision and zero boilerplate on top of that it knows when to automatically unsubscribe from data when it no longer has any listeners and that can be extremely important when using real real-time data like firestore for example speaking of async data let's talk about promises react has a new use hook that's currently experimental that can be used to unwrap promises directly in a component it's essentially the equivalent to the await keyword which resolves the value of the promise into the variable however you'll also likely want to show a loading State and handle errors one way to do that is to wrap this component with suspense which will render this loading spinner as a fallback while the promise is being resolved and then we could wrap all of that in an error boundary to show an error page if it's rejected this code is a bit intimidating and requires a lot of knowledge of react to even understand what the hell is going on in svelte we can actually unwrap promises directly in a template using a weight while awaiting show a loading spinner then when the number resolves show the main UI otherwise if there's an error show the error UI it's easily understandable for any JavaScript developer who knows promises and finally if you want to see some full stack comparisons on the server become a fireship pro member to get access to these full courses huge thanks to everyone who's already supported by work there and today is the last day to get 35 off a membership using that code below thanks for watching and I will see you in the next one