Philip Fabianek
Philip Fabianek
  • 22
  • 325 835
What is React Compiler?
React Compiler is a compiler that optimizes your React app by automatically memoizing your code. In this video, we explore what the React Compiler does in detail and compare it to the existing memoization features. We also go through how you can use and install the React Compiler yourself.
Timestamps:
0:00 Introduction
2:37 How does it work
4:00 React Compiler Playground
5:53 Manual memoization
7:01 Installation
8:24 ESLint plugin
8:52 Outro
Contact:
►Website: philipfabianek.com
►Twitter: philip_fabianek
►LinkedIn: www.linkedin.com/in/philip-fabianek/
►GitHub: github.com/philipfabianek
#reactjs #reactdeepdive #reactcompiler
Переглядів: 1 019

Відео

Building React (TanStack) Query From Scratch
Переглядів 7 тис.Місяць тому
Have you ever wondered how React Query, currently known as TanStack Query, actually works? In this video, we're going to build the useQuery hook from scratch and by the end, you'll have a deep understanding of React Query's data fetching and state management mechanisms. So let’s get to it. Project link: github.com/philipfabianek/react-query-from-scratch Timestamps: 0:00 Setup 2:41 Overview 4:28...
Deploying Django React App on a Linux VPS in 10 minutes
Переглядів 276Місяць тому
Project link: github.com/philipfabianek/django-react-app In this video, we deploy a Django-React application on a Linux VPS server from scratch. We start by configuring a PostgreSQL database and downloading the project. We create a virtual environment and continue by installing and using uWSGI. We also use NGINX as a reverse proxy server that forwards the traffic to uWSGI. Finally, we also enab...
Why use Next.js?
Переглядів 4,9 тис.Рік тому
Next.js is one of the most popular React frameworks, but how does it actually work and should you use it? In this video, we explore the 3 strategies of pre-rendering Next.js offers and compare them with each other. They are static-site generation (SSG), incremental static regeneration (ISR) and server-side rendering (SSR). These strategies adress the fundamental problems such as large bundles a...
JavaScript is Weird
Переглядів 23 тис.2 роки тому
I still love JavaScript though. Check out my video about how React.js works: ua-cam.com/video/7YhdqIR2Yzo/v-deo.html Music: ua-cam.com/video/rSPLmZD2HKM/v-deo.html ua-cam.com/video/9f5ulgjyd4c/v-deo.html Social Media: ►Twitter: philip_fabianek ►LinkedIn: www.linkedin.com/in/philip-fabianek/ ►Website: www.philipfabianek.com ►GitHub: github.com/philipfabianek #javascript #js #programming
What is React Suspense? (including Suspense for Data Fetching)
Переглядів 19 тис.2 роки тому
In this video, we will learn what is React Suspense, how to use it with React.lazy() and how to use it for data fetching. We are also going to build a small app for fetching posts that will make use of Suspense for data fetching and we create a "skeleton screen" as a fallback. Suspense was added to React in version 16.6 and it was initially used for lazy loading with React.lazy(). However, its ...
How Does React State Actually Work? React.js Deep Dive #4
Переглядів 13 тис.3 роки тому
In this video, we will learn how React State actually works. We will first see how React communicates with the renderer, because it is the renderer that handles the update. Later, we will explore all of the lifecycle methods related to updates, specifically getDerivedStateFromProps, shouldComponentUpdate and componentDidUpdate. We will go through them one by one and we will connect them with th...
How Do React Hooks Actually Work? React.js Deep Dive #3
Переглядів 30 тис.3 роки тому
In this video, we will learn how React Hooks actually work. We will do that by answering a number of questions about React Hooks. The first and most important question is Why do hooks rely on call order? (in other words Why can't they be called inside loops or conditions?). This has a lot to do with the fact that hooks are all about arrays and indexes. We will show this by reverse-engineering t...
What Is React Fiber? React.js Deep Dive #2
Переглядів 59 тис.3 роки тому
In this video, we will learn about the current React reconciler - the Fiber reconciler. This reconciler is based on the Fiber object. React Fiber is a complete rewrite of React that fixes long-standing issues (React being synchronous) and offers incredible opportunities heading into the future. It focuses on animations and responsivness. Features like Error boundaries, Suspense and Concurrent M...
How Does React Actually Work? React.js Deep Dive #1
Переглядів 143 тис.3 роки тому
Have you ever wondered, how does React actually work? In this video, we will explore what is really happening behind the scenes. First, we will learn about React elements, components and component instances. Then, we will move to React Reconciliation along with the Diffing algorithm, which is the very core of React. Afterwards, we will move to rendering and to the renderers themselves, looking ...
useImperativeHandle | React Hooks Tutorial #12
Переглядів 6 тис.3 роки тому
In this final episode of my React Hooks Tutorial, we will learn about the useImperativeHandle hook. In order to understand the useImperativeHandle hook, we first have to understand the concept of forwarding refs using the React.forwardRef function. This allows us to pass refs to nested components, because we cannot achieve so using the ref keyword. After that, we will make use of the useImperat...
useDebugValue and useLayoutEffect | React Hooks Tutorial #11
Переглядів 3,1 тис.3 роки тому
In this episode of my React Hooks Tutorial, we will learn about the useDebugValue and useLayoutEffect hooks. The useDebugValue hook allows us to set a label for our custom hook in the React DevTools and the useLayoutEffect hooks allow us to reliably access and adjust DOM just before the browser paints it to the screen. This means that the useLayoutEffect hooks is the ideal place for adjusting s...
Custom hooks | React Hooks Tutorial #10
Переглядів 7773 роки тому
In this episode of my React Hooks Tutorial, we will learn how we can create custom React hooks. Custom hooks allow us to extract logic into reusable functions. Meaningful custom hooks can make your application very powerful. Custom hooks allow us to share logic that wasn't possible in React components and they really allow us to use our imagination. I will demonstrate this by creating a custom ...
useMemo and useCallback | React Hooks Tutorial #9
Переглядів 1,2 тис.3 роки тому
In this episode of my React Hooks Tutorial, we will learn about the useMemo and useCallback hooks. All those hooks do is improve our application performance by using memoization. While the useMemo hook is used to memoize a value, the useCallback hooks allows us to memoize a function (a callback) that we can pass as a prop to PureComponent to prevent excessive component re-rendering and therefor...
useRef | React Hooks Tutorial #8
Переглядів 9993 роки тому
In this episode of my React Hooks Tutorial, we will learn about the useRef hook. While the primary purpose of the hook is to store any mutable data without re-rendering the component, you are probably familiar with it because is is the primary way to access the DOM. Starting repository: github.com/philipfabianek/react-hooks-tutorial/tree/Episode7 Ending repository: github.com/philipfabianek/rea...
combining useContext with useReducer | React Hooks Tutorial #7
Переглядів 2 тис.3 роки тому
combining useContext with useReducer | React Hooks Tutorial #7
useReducer | React Hooks Tutorial #6
Переглядів 1,2 тис.3 роки тому
useReducer | React Hooks Tutorial #6
useContext | React Hooks Tutorial #5
Переглядів 2 тис.3 роки тому
useContext | React Hooks Tutorial #5
useEffect | React Hooks Tutorial #4
Переглядів 2 тис.3 роки тому
useEffect | React Hooks Tutorial #4
useState | React Hooks Tutorial #3
Переглядів 2,4 тис.3 роки тому
useState | React Hooks Tutorial #3
Basic setup | React Hooks Tutorial #2
Переглядів 1,5 тис.3 роки тому
Basic setup | React Hooks Tutorial #2
What are React Hooks? | React Hooks Tutorial #1
Переглядів 3,8 тис.3 роки тому
What are React Hooks? | React Hooks Tutorial #1

КОМЕНТАРІ

  • @AbhishekKumar-hr1sr
    @AbhishekKumar-hr1sr День тому

    pls add part 2 with GC and batching calls

  • @STEMingAsp
    @STEMingAsp День тому

    Great video! Could you perhaps create a tutorial on deploying a Django React App with AWS EC2 or direct me to a resource for that? I have found a tutorial for deploying a Django project with EC2, but I have my frontend in React separately like you.

  • @GiftOkiefe
    @GiftOkiefe 4 дні тому

    Great content

  • @marcus4938
    @marcus4938 7 днів тому

    Thank you, Philip. Your content is fantastic. It would be even better if you could make a video about the differences between incremental DOM and virtual DOM and their pros and cons

  • @39_ganesh_ghodke98
    @39_ganesh_ghodke98 8 днів тому

    very informative video 👍

  • @39_ganesh_ghodke98
    @39_ganesh_ghodke98 8 днів тому

    very informative video. Thanks

  • @user-sn2vl7iw9m
    @user-sn2vl7iw9m 10 днів тому

    Thank you SOOOO MUCH! Awesome work!

  • @sourishdutta9600
    @sourishdutta9600 10 днів тому

    Hi!! can you create one video on react server component, how it works under the hood.

  • @lucas9474-c2c
    @lucas9474-c2c 13 днів тому

    It all works, thank you!

  • @sanjeettiwari9000
    @sanjeettiwari9000 17 днів тому

    Good to see your videos back on my recommended list. Great explanation and thanks for generating more interest in the upcoming version of React.

  • @Sagarclips
    @Sagarclips 18 днів тому

    great video Philip! Keep rocking

  • @pushkarchaubey8300
    @pushkarchaubey8300 24 дні тому

    awsome bro you just make it so simple to understand thanku bro 🙂🙂

  • @Ghost242ful
    @Ghost242ful 29 днів тому

    Great explanation, thanks!

  • @abolfazlsoltani12
    @abolfazlsoltani12 Місяць тому

    clear & comprehensive video🥰

  • @user-xg3hz2sc8n
    @user-xg3hz2sc8n Місяць тому

    Great video! Very comprehensive material But at 10:40 you mentioned that two first <li> items will be unmounted because there will be new <li> inserted before the first one But neither type nor key have changed. Only children have changed. So I guess they won't be unmounted, but their props will be changed

  • @sairafatima4150
    @sairafatima4150 Місяць тому

    Thanks...

  • @LifeIsCrazyAsShit
    @LifeIsCrazyAsShit Місяць тому

    Nice, can you also make a video on how to resolve react warning in a console Like memory leak warning Passive event handling took 250ms and many more

  • @zen.ali238
    @zen.ali238 Місяць тому

    I haven't found any channel who teaches things this much deep on react... Appreciate your effors, Have a healthy life.

  • @favanzzo
    @favanzzo Місяць тому

    you should do a react course my friend.

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      I might consider that in the future but for now I am going to focus on my UA-cam channel

  • @rushikeshmule6091
    @rushikeshmule6091 Місяць тому

    👏🏻

  • @Scipion50
    @Scipion50 Місяць тому

    Just great as usual. Keep it up!

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      Thank you, more videos are on the way

  • @husnulaman
    @husnulaman Місяць тому

    Great video, brtoher! Can you please mention the VSCode theme and font you are using?

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      My theme is Atom One Dark and the font is Fira Code

  • @Assoehosselaar
    @Assoehosselaar Місяць тому

    Amazing content keep up the good work

  • @rockNbrain
    @rockNbrain Місяць тому

    Nice job dude !! 🎉

  • @LifeIsCrazyAsShit
    @LifeIsCrazyAsShit Місяць тому

    Wow.. please create a long content about this

  • @LazyDeveloper-1
    @LazyDeveloper-1 Місяць тому

    Great video. A great way to show how react-query works under the hood. And obviously I'd like a second episode of this. Additionally, If I may, I think it'd be a very good idea to add TypeScript into consideration in the next video and adding proper types. Halfway through the video I was lost in all of those values and had to help myself with types. Using types and TypeScript adds a certain structure to how you look at your code. It can also help tremendously in the teaching capabilities of your next video.

  • @LazyDeveloper-1
    @LazyDeveloper-1 Місяць тому

    Very neatly showed how everything works under the hood, great job! I'd really like a second part of this tutorial. But, if I may, I think it'll be a good idea to also take TypeScript into consideration in the next video. Halfway through the video I was lost in all of the values without types. Adding TypeScript in that kind of project adds a certain structure to your understanding of the building blocks and it improves the learning capabilities even more.

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      Thank you, I agree that adding TypeScript might improve the understanding of the different data types

  • @Fullflexno
    @Fullflexno Місяць тому

    Cool. Looing saving this for later. Thank you for this!

  • @xiiEJRAM
    @xiiEJRAM Місяць тому

    I hope you keep uploading videos like this, I really love the way you explain concepts 🤍🤍

  • @KA3AHOBA94
    @KA3AHOBA94 Місяць тому

    Where is the react deployment?

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      React on its own is just a JavaScript library. When you create a bundle, you end up with some JavaScript and CSS files. If you want to deploy a React application without any backend (server) code, you just need to find a place to host these static files. You can for example use Github pages. In this video, I deploy a more complicated application that includes Django backend, therefore I use a virtual private server (VPS) where I need to set up the databese, NGINX, etc.

  • @kshitijvengurlekar1192
    @kshitijvengurlekar1192 Місяць тому

    Why are you not getting ts 7006 errors, Have you relaxed typescript rules, I am getting a lot of TS errors even for things like constructor() { this.queries = []; }

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      I manually disabled all the type errors so they didn't distract from the code

  • @deadfire7973
    @deadfire7973 Місяць тому

    excellent work! thanks!

  • @FrontendNerd-lg3oh
    @FrontendNerd-lg3oh Місяць тому

    need part 2 (longer version like 1 hour)

  • @haseebarshad7451
    @haseebarshad7451 Місяць тому

    Bro you're my hero

  • @viralpasad5222
    @viralpasad5222 Місяць тому

    This explanation can be understood by a 5 year old as well! Genius!!!

  • @Shuyinz
    @Shuyinz Місяць тому

    This is so cool! Please continue making these type of videos

  • @aes0p895
    @aes0p895 Місяць тому

    great job. very good info in a short time.

  • @yadusolparterre
    @yadusolparterre Місяць тому

    Great video ! Would you mind saying which programs you used to create this video? Specifically, the animations at 2:51 and the text animation as you add code in your IDE

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      Thank you! I created the segment starting at 2:51 by drawing the whole thing in a program and exporting several versions of the drawing with different hidden layers. I then added a simple fade-in and fade-out to make it look animated. You could also create this in almost any video editing program, since it consists only of text and simple shapes like rectangles and lines. Recently, I also came across the Remotion library, which allows you to create videos programmatically using React components. Even though I haven't used it yet, it looks very interesting. The text editor animations are created by simply by cutting the footage at particular times and adding a fade transition. Though it took quite a bit of work to make it look like this.

  • @alokbaluni8760
    @alokbaluni8760 Місяць тому

    I always wondered about this. Thank you for the video.

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      Thank you for watching

    • @alokbaluni8760
      @alokbaluni8760 Місяць тому

      @@PhilipFabianek Are you planning to make a video on Design patterns in the future? I understood the explanation of Observer pattern through your video quite clearly.

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      I will think about it, it is in interesting topic to consider

  • @lucasezequiel1533
    @lucasezequiel1533 Місяць тому

    extreme clean and raw implementation as usual

  • @favanzzo
    @favanzzo Місяць тому

    welcome back :)

  • @user-dh4mc3te3r
    @user-dh4mc3te3r Місяць тому

    讲的太好了,thanks

  • @xyzatin
    @xyzatin Місяць тому

    2 hours gem content in 15 minutes! Thanks a lot!

  • @user-oortcloud
    @user-oortcloud Місяць тому

    Thank you!

  • @user-oortcloud
    @user-oortcloud Місяць тому

    I'm really enjoying your React lecture! Thank you!

  • @digitalsparrow_8599
    @digitalsparrow_8599 Місяць тому

    Amazing explanation for such a complex subject!!!

  • @PhilipFabianek
    @PhilipFabianek Місяць тому

    The idea of this video is to show you that "raw" Linux deployment can be quite easy. When I was learning web development many years ago, I used to deploy my applications using services for everything thinking that deploying from scratch has to be very difficult. I hope that this video will convince you that it is not. As noted, this is not an in-depth guide on deployment, but I am thinking of creating a series of videos where I would go much deeper. Let me know if this is something that you would be interested in.

  • @capitankazuriki
    @capitankazuriki Місяць тому

    maybe you should look into the way you make videos. I watched the video and i could listen to the words but could not understand a thing you said

    • @PhilipFabianek
      @PhilipFabianek Місяць тому

      This video is quite technical and assumes some knowledge of React. Perhaps you could watch the previous video at ua-cam.com/video/7YhdqIR2Yzo/v-deo.html, which should be more accessible

  • @rotvein4629
    @rotvein4629 Місяць тому

    Actually the best videos on React I've ever seen. As a beginner in React I find your content amazingly helpful, deep and clear-cut. Thank you a lot, man, you're GOAT

  • @demarco6967
    @demarco6967 Місяць тому

    Great Video!