React Render Tutorial - 3 - useState

00:12:40
https://www.youtube.com/watch?v=OQYsHvEq7nE

Zusammenfassung

TLDRVideoclipul explică utilizarea hook-ului useState în React, arătând cum să create o componentă funcțională simplă care să gestioneze o numărătoare. Demonstrează cum stările afectează procesul de randare, explicând comportamentul re-randărilor și modul strict. Utilizatorii pot învăța cum să controleze fluxul de rendering și de ce anumite re-randări nu au loc atunci când se setează o stare la aceeași valoare. Autorul subliniază importanța înțelegerii acestor comportamente pentru dezvoltarea eficientă a aplicațiilor React.

Mitbringsel

  • 🚀 Începeți un proiect React cu 'npx create-react-app'.
  • 🛠️ Creați un folder 'components' pentru organizarea codului.
  • ⚛️ Folosiți 'useState' pentru gestionarea stării într-o componentă.
  • 🔄 O componentă se re-randează atunci când se utilizează setter-ul din useState.
  • 💡 Modulo strict poate provoca re-randări multiple în modul de dezvoltare.
  • ❌ Re-randarea nu are loc dacă se setează o stare la aceeași valoare.
  • 📊 React utilizează object.is pentru a compara stările.
  • 🔍 Corectarea și testarea comportamentului de re-randare sunt esențiale pentru dezvoltare.

Zeitleiste

  • 00:00:00 - 00:05:00

    În acest video, se prezintă utilizarea hook-ului useState în React, începând cu crearea unui proiect nou folosind Create React App. Se explică procesul de configurare a structurii proiectului, inclusiv crearea unui folder pentru componente și a unui fișier pentru useState. Un exemplu de componentă este demonstrat, care include un buton pentru a incrementa o valoare a contorului. Se menționează comportamentul de redare al componentei, în special impactul modului strict de dezvoltare asupra logării re-rendering-ului.

  • 00:05:00 - 00:12:40

    Se discută despre comportamentul de re-rendering în contextul fazelor de redare și angajare. La fiecare clic pe buton, setterul de stare din hook-ul useState marchează componenta pentru o actualizare. Se ilustrează că actualizarea stării cu aceeași valoare nu determină o re-redare, iar React compară valorile stării pentru a decide dacă este necesară o redare. Se finaliză cu o recapitulare a comportamentului useState și a comparației dintre starea anterioară și cea curentă.

Mind Map

Video-Fragen und Antworten

  • Ce este hook-ul useState în React?

    useState este un hook care permite gestionarea stării într-o componentă funcțională React.

  • Cum se creează un proiect React?

    Un proiect React se poate crea folosind comanda npx create-react-app urmată de numele proiectului.

  • De ce componenta se re-randează de două ori în modul strict?

    Componenta se re-randează de două ori în modul strict pentru a ajuta la identificarea problemelor potențiale în aplicație.

  • Ce se întâmplă dacă se setează o stare la aceeași valoare?

    Dacă se setează o stare la aceeași valoare, React poate re-randa componenta o singură dată și apoi renunță la re-randări ulterioare.

  • Cum compară React vechea și noua stare?

    React compară starea anterioară și nouă folosind algoritmul object.is.

Weitere Video-Zusammenfassungen anzeigen

Erhalten Sie sofortigen Zugang zu kostenlosen YouTube-Videozusammenfassungen, die von AI unterstützt werden!
Untertitel
en
Automatisches Blättern:
  • 00:00:01
    all right it's finally time
  • 00:00:03
    to get started with some code and our
  • 00:00:06
    first video
  • 00:00:07
    is about use date let's understand with
  • 00:00:10
    an example
  • 00:00:11
    the rendering behavior in react when we
  • 00:00:13
    are dealing with
  • 00:00:14
    the use state hook the first thing i
  • 00:00:17
    have to mention
  • 00:00:18
    is that i have created a new react
  • 00:00:21
    project using
  • 00:00:22
    create react app so go ahead and run the
  • 00:00:25
    command
  • 00:00:26
    npx create react app followed by your
  • 00:00:29
    project name
  • 00:00:30
    i have named the project as react render
  • 00:00:33
    demo
  • 00:00:35
    once your project is created in the
  • 00:00:37
    source folder
  • 00:00:38
    create a new folder called components
  • 00:00:43
    this folder
  • 00:00:44
    will contain all the code we are going
  • 00:00:46
    to write during this series
  • 00:00:49
    since this video's focus is on the use
  • 00:00:52
    state hook
  • 00:00:53
    within the components folder i'm going
  • 00:00:55
    to create another folder
  • 00:00:57
    called ustade
  • 00:01:00
    u and s in uppercase
  • 00:01:04
    within this folder i'm going to create a
  • 00:01:06
    new file
  • 00:01:07
    called use state.js
  • 00:01:11
    again u and s uppercase
  • 00:01:15
    within this file i'm going to use the
  • 00:01:17
    snippet rafc
  • 00:01:19
    to create a function component
  • 00:01:22
    all right that was a bit of work but we
  • 00:01:24
    finally have a component to understand
  • 00:01:26
    the rendering behavior with you state
  • 00:01:30
    for this example we are going to create
  • 00:01:32
    a simple
  • 00:01:33
    counter so import you state
  • 00:01:36
    at the top
  • 00:01:40
    and within the component create a count
  • 00:01:43
    state variable
  • 00:01:44
    and the setter function
  • 00:01:52
    so count set count and the initial value
  • 00:01:55
    is
  • 00:01:56
    zero for the jsx i'm going to add
  • 00:01:59
    a button that increments the count value
  • 00:02:04
    button the inner text is going to be the
  • 00:02:06
    count value
  • 00:02:12
    and on click we increment
  • 00:02:15
    the count value by calling set count
  • 00:02:18
    where we take the previous count and
  • 00:02:20
    increment it by
  • 00:02:22
    one and that is
  • 00:02:25
    pretty much our component and what we
  • 00:02:28
    are really interested in
  • 00:02:29
    is the rendering of this component so
  • 00:02:32
    i'm going to add a log statement
  • 00:02:36
    use state render to identify
  • 00:02:40
    when this component is rendering or
  • 00:02:43
    re-rendering
  • 00:02:45
    let me quickly format it and quickly
  • 00:02:48
    in the comments if you can leave an
  • 00:02:49
    opinion as to whether
  • 00:02:51
    this is the font size or this
  • 00:02:55
    is the font size you would prefer i
  • 00:02:57
    changed my monitor and i can't remember
  • 00:02:59
    the settings anymore
  • 00:03:01
    so just let me know in the comment
  • 00:03:02
    section and i'll stick to it
  • 00:03:05
    once we have this use state component
  • 00:03:07
    ready let's include it in
  • 00:03:09
    app.js and test it out so open app.js
  • 00:03:15
    include use date make sure to import it
  • 00:03:18
    at the top
  • 00:03:19
    and then let's head to the browser
  • 00:03:22
    on page load if we take a look at the
  • 00:03:25
    console
  • 00:03:28
    we can see two lock statements
  • 00:03:31
    if we check our component though we just
  • 00:03:34
    have
  • 00:03:35
    the one log statement but the statement
  • 00:03:38
    was logged
  • 00:03:39
    twice now this can be really confusing
  • 00:03:42
    at first
  • 00:03:43
    but this is because of the strict mode
  • 00:03:46
    encouraged by create react app if you
  • 00:03:49
    take a look at
  • 00:03:50
    index.js you can see that our app
  • 00:03:53
    component
  • 00:03:54
    is wrapped with react dot strict mode
  • 00:03:58
    what this wrapper does is intentionally
  • 00:04:01
    double invoke the function component
  • 00:04:03
    body
  • 00:04:04
    only in development mode if you deploy
  • 00:04:07
    to production however
  • 00:04:09
    you would see the lock statement only
  • 00:04:11
    once as intended
  • 00:04:13
    now if you want to understand why the
  • 00:04:15
    strict mode double invokes
  • 00:04:17
    or just want to learn more about strict
  • 00:04:19
    mode in general
  • 00:04:20
    i would advise you to go through the
  • 00:04:22
    react docs
  • 00:04:24
    for now the fix is to simply comment out
  • 00:04:27
    this wrapper component
  • 00:04:34
    if we now take a look at the browser we
  • 00:04:36
    see the log statement
  • 00:04:37
    only once which is what we would expect
  • 00:04:40
    from the initial render
  • 00:04:43
    now let's focus on the role of use state
  • 00:04:47
    after the initial render one of the ways
  • 00:04:49
    to flag a component for re-render
  • 00:04:52
    is by calling the setter function from
  • 00:04:54
    you state
  • 00:04:56
    in our component we are calling set
  • 00:04:59
    count
  • 00:05:00
    on click of the button if you go back to
  • 00:05:03
    the browser
  • 00:05:04
    clear the console and click on the
  • 00:05:07
    button
  • 00:05:09
    you can see that u-state render is
  • 00:05:11
    logged in the console
  • 00:05:13
    with every subsequent click the setcount
  • 00:05:17
    function
  • 00:05:17
    will flag or queue a re-render of our
  • 00:05:20
    component
  • 00:05:21
    and the message is logged in the console
  • 00:05:24
    every time
  • 00:05:26
    this is probably one of the more common
  • 00:05:28
    things that we learn
  • 00:05:29
    when using the use date hook
  • 00:05:32
    let's understand this re-rendering
  • 00:05:34
    behavior with respect to
  • 00:05:35
    the render and commit phases
  • 00:05:39
    we begin with the component tree we have
  • 00:05:42
    the app component and the use state
  • 00:05:44
    component
  • 00:05:46
    when we click on the button in the
  • 00:05:48
    ustate component
  • 00:05:49
    the state hooks setter function is
  • 00:05:51
    called which flags
  • 00:05:53
    the use state component as needing an
  • 00:05:55
    update
  • 00:05:57
    during the render phase react will first
  • 00:05:59
    go through the component tree
  • 00:06:00
    and identify the flag components
  • 00:06:04
    it says that ustate is the only
  • 00:06:06
    component that needs an update
  • 00:06:09
    react then uses the create element
  • 00:06:11
    method
  • 00:06:12
    to convert the component's jsx into a
  • 00:06:15
    react element
  • 00:06:17
    it will then diff the element produced
  • 00:06:19
    from the previous vendor
  • 00:06:21
    to the new render it will identify the
  • 00:06:23
    changes
  • 00:06:24
    and hand them over to the commit phase
  • 00:06:27
    where the changes are applied to the dom
  • 00:06:30
    this is what happens when you use the
  • 00:06:33
    state hook
  • 00:06:33
    in a react component now what is a
  • 00:06:37
    special case
  • 00:06:38
    with you state and re-rendering is that
  • 00:06:41
    if you update a state hook to the same
  • 00:06:43
    value as
  • 00:06:44
    the current state react may render that
  • 00:06:47
    component
  • 00:06:48
    one more time and then bail out from
  • 00:06:50
    subsequent renders
  • 00:06:53
    let's try to understand what i mean by
  • 00:06:54
    that with an example
  • 00:06:56
    in the components jsx i'm going to add
  • 00:06:59
    two more buttons
  • 00:07:02
    first button will simply set the count
  • 00:07:04
    value to zero
  • 00:07:06
    so count to zero
  • 00:07:10
    on click set
  • 00:07:13
    count zero
  • 00:07:16
    and the other button is going to set the
  • 00:07:18
    count value to five
  • 00:07:20
    so set count five
  • 00:07:23
    count to five
  • 00:07:26
    let's now head to the browser and see
  • 00:07:28
    what happens
  • 00:07:30
    on page load we have the one log message
  • 00:07:33
    from the initial vendor
  • 00:07:37
    if i click on the first button the
  • 00:07:39
    component re-renders
  • 00:07:41
    and we already know about this however
  • 00:07:44
    if i reload
  • 00:07:48
    clear the console and click on the
  • 00:07:50
    second button
  • 00:07:51
    which is count to zero
  • 00:07:55
    the component does not re-render and i
  • 00:07:58
    can click on it
  • 00:07:59
    as many times as i want to
  • 00:08:03
    so after the initial render if you call
  • 00:08:06
    a setter function
  • 00:08:07
    but set the state to the same value the
  • 00:08:10
    component
  • 00:08:10
    will not re-render next let's talk about
  • 00:08:14
    the count to five button
  • 00:08:17
    i'm going to reload the page and this
  • 00:08:19
    time
  • 00:08:21
    i'm going to click on the first button
  • 00:08:24
    five
  • 00:08:24
    times which logs the render message five
  • 00:08:27
    times
  • 00:08:28
    so one two three four five
  • 00:08:32
    you can see the message has been logged
  • 00:08:34
    five times
  • 00:08:37
    now i'm going to clear the console and
  • 00:08:40
    click
  • 00:08:40
    on the count to 5 button
  • 00:08:44
    you can see that the component renders
  • 00:08:46
    one more time
  • 00:08:48
    however if i click on the same button
  • 00:08:51
    again
  • 00:08:53
    as many times as i want to
  • 00:08:56
    the component does not re-render
  • 00:08:59
    let me clear the console click it again
  • 00:09:03
    the component does not re-render
  • 00:09:06
    if i increment it by one though
  • 00:09:11
    and then click count to five again
  • 00:09:14
    it will re-render as the state value
  • 00:09:16
    changes again
  • 00:09:18
    so after a component has been
  • 00:09:20
    re-rendered if you set the state
  • 00:09:22
    variable to the same value
  • 00:09:24
    the component will re-render but only
  • 00:09:27
    one more time let's quickly revisit
  • 00:09:31
    our interface and understand what
  • 00:09:33
    happens
  • 00:09:35
    we begin with the component tree we have
  • 00:09:38
    the app component
  • 00:09:39
    and the use state component when we
  • 00:09:42
    click
  • 00:09:43
    on the button in the ustade component
  • 00:09:45
    the state hooks setter function is
  • 00:09:47
    called
  • 00:09:47
    which flags the u state component as
  • 00:09:49
    needing an update
  • 00:09:51
    react will go through the component tree
  • 00:09:54
    and identify
  • 00:09:55
    the flagged components it sees that the
  • 00:09:58
    u-state component
  • 00:09:59
    is flagged however there is a catch
  • 00:10:04
    react requires that you state updates
  • 00:10:08
    must pass in or return a new reference
  • 00:10:12
    as the state value if the state is a
  • 00:10:15
    primitive type
  • 00:10:16
    it has to be a new string or number
  • 00:10:19
    or boolean if it is not the case
  • 00:10:23
    react will simply bail out from the
  • 00:10:25
    interface for that component
  • 00:10:27
    the bailing out part though has two
  • 00:10:29
    cases
  • 00:10:31
    if only the initial render is completed
  • 00:10:34
    and the value passed into the setter
  • 00:10:35
    function
  • 00:10:36
    is the same as before the render phase
  • 00:10:38
    bails out
  • 00:10:39
    from proceeding further however
  • 00:10:43
    if the component has been re-rendered
  • 00:10:45
    already then the component will proceed
  • 00:10:47
    with the render phase
  • 00:10:49
    one more time and dan abramov mentions
  • 00:10:52
    this as a safety net that is required
  • 00:10:55
    as react won't actually know if it's
  • 00:10:58
    safe to bail out in all cases
  • 00:11:00
    until it renders again so the render
  • 00:11:04
    phase
  • 00:11:04
    proceeds and generates the react element
  • 00:11:07
    from the jsx
  • 00:11:09
    the reconciliation takes place react
  • 00:11:12
    sees that there is
  • 00:11:13
    no change from the previous render and
  • 00:11:16
    simply exits
  • 00:11:17
    the render phase so it's important to
  • 00:11:20
    note here
  • 00:11:21
    that react goes to the render phase only
  • 00:11:24
    to discard the result
  • 00:11:26
    so that is the rendering behavior with
  • 00:11:29
    respect to the use state hook
  • 00:11:31
    let me summarize it so that it stays in
  • 00:11:33
    your head for a longer duration of time
  • 00:11:38
    the setter function from a u state hook
  • 00:11:40
    will cause the component to re-render
  • 00:11:44
    however the exception is when you update
  • 00:11:47
    a state hook
  • 00:11:48
    to the same value as the current state
  • 00:11:51
    if you're updating to the same value
  • 00:11:53
    after the initial render
  • 00:11:55
    the component will not re-render
  • 00:11:58
    if you're updating to the same value
  • 00:12:00
    after re-renders
  • 00:12:01
    react will render that specific
  • 00:12:03
    component one more time
  • 00:12:05
    and then bails out from any subsequent
  • 00:12:08
    renders
  • 00:12:10
    by the way if you're wondering how the
  • 00:12:12
    comparison is made
  • 00:12:14
    between the previous and the current
  • 00:12:16
    state
  • 00:12:17
    react uses the object dot ease
  • 00:12:20
    comparison algorithm
  • 00:12:21
    which you can google for more
  • 00:12:23
    information
  • 00:12:25
    i hope this video gives you an insight
  • 00:12:27
    into the type of content
  • 00:12:29
    you can expect in this series in the
  • 00:12:32
    next video let's take a look at the
  • 00:12:34
    reducer hook
  • 00:12:34
    which is similar in its behavior i'll
  • 00:12:37
    see you guys
  • 00:12:38
    in the next one
Tags
  • React
  • useState
  • hook
  • componentă
  • numărătoare
  • randare
  • re-randare
  • mod strict
  • stare
  • performanță