Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Well done!

You have completed React Components!

Sign up for Treehouse Back to Library

React Component Patterns Roadmap

3:01 with Laura Coronel

Learn useful design patterns to use in your React components. These patterns will not only help prevent you from writing messy and over-complicated code, but also help you create flexible, more performant components that are easier to understand and maintain.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Welcome to the last stage of the React Components course. 0:04
    In the previous stage, we created the stopwatch component. 0:08
    We started off by building the elements of the stopwatch, 0:12
    then brought functionality to the buttons. 0:17
    We used the ternary operator to conditionally render the start stop 0:20
    button, based on the running state of the stopwatch. 0:24
    We implemented this using React's useEffect hook, which lets you perform 0:27
    side effects like fetching data, or in our case setting up a timer. 0:32
    By default useEffect hook runs after the first render and after every update, 0:37
    but we customize that behavior by passing it a second argument. 0:43
    When working with useEffect hooks, 0:48
    it's good to know that there are two kinds of side effects. 0:50
    Those that don't require cleanup and those that do. 0:53
    Well, our side effect is the latter kind. 0:57
    So we needed to do some cleanup, or else the timer would continue 0:59
    running its callback forever wasting CPU and memory. 1:04
    We did so by having our side effect return a cleanup function that cleared the timer. 1:09
    React performs the cleanup function in two situations. 1:14
    Before running the next side effect, and when the component unmounts. 1:18
    Having the cleanup function run when the component unmounts, 1:23
    helps prevent memory leaks that can negatively impact performance. 1:27
    In this stage, 1:32
    I'll teach you a few useful patterns you can use in your React components. 1:33
    These patterns will not only help prevent you from writing messy and 1:38
    overcomplicated code, but also help you create flexible more 1:43
    performant components that are easier to understand and maintain. 1:48
    We'll start off by learning how to use React.memo() to produce 1:53
    a performance boost in your app. 1:57
    We'll also use destructuring to unpack props into distinct variables. 2:00
    There's one more React hook I wanna introduce you to. 2:05
    It's the useRef hook. 2:09
    It's another React hook that stores data. 2:11
    So I'll also let you know when to use it over the useState hook. 2:14
    Lastly, we'll talk about how to validate props with PropTypes. 2:19
    PropTypes is a library that adds type checking abilities to your app. 2:24
    It will tell React to throw an error when a component prop does not match 2:28
    the data type you were expecting. 2:33
    For example, the counter component expects the prop score to be a number. 2:35
    But if for some reason counter receives a string as the score prop, 2:39
    React will throw an error. 2:44
    You can even use PropTypes to mark a prop as required, or 2:46
    provide a default value if the prop isn't provided. 2:51
    Lastly, you'll get an opportunity to practice much of what you've 2:55
    learned so far. 2:58
    Let's get started! 2:59

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up