title
5 Pro-Level React Do's & Don'ts

description
In this video, Jack will talk about some do's and don'ts when it comes to writing code with the React JavaScript framework. 📽️ Jack's YouTube Channel: https://www.youtube.com/c/JackHerrington 👇 Follow Traversy Media On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 00:00 Introduction 00:30 Do use functional components 02:22 Don’t think of function components as templates 07:08 Do use TypeScript 12:02 Don’t worry about re-renders (too much) 14:35 Do learn to love dependency arrays 18:36 Don’t ignore useCallback or useMemo 22:25 Do learn to make custom hooks 23:23 Don’t use Redux just because you think you have to 26:00 Do use a query library 27:50 Don’t make your own UI library 29:29 Outroduction

detail
{'title': "5 Pro-Level React Do's & Don'ts", 'heatmap': [{'end': 1229.886, 'start': 1174.145, 'weight': 0.82}, {'end': 1354.912, 'start': 1317.341, 'weight': 0.777}], 'summary': 'Covers react best practices, typescript usage, and performance optimization, emphasizing functional components over class components, typescript for reliability, and the impact of dependency arrays on performance, with a focus on optimizing react performance using usecallback and usememo, and promoting reusability and state management through custom hooks and existing ui libraries.', 'chapters': [{'end': 375.977, 'segs': [{'end': 92.667, 'src': 'embed', 'start': 69.326, 'weight': 0, 'content': [{'end': 76.353, 'text': 'Functional components use hooks and those hooks create a reactive state management model baked right into React.', 'start': 69.326, 'duration': 7.027}, {'end': 85.503, 'text': 'Using useState and useReducer, you declare your state and then using useEffect, useCallback and useMemo, you react to changes in that state.', 'start': 77.014, 'duration': 8.489}, {'end': 92.667, 'text': 'And those five little hooks have created a vibrant ecosystem of super awesome hooks out there.', 'start': 86.482, 'duration': 6.185}], 'summary': "React's functional components use hooks for reactive state management, leading to a vibrant ecosystem of super awesome hooks.", 'duration': 23.341, 'max_score': 69.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS869326.jpg'}, {'end': 150.213, 'src': 'embed', 'start': 117.988, 'weight': 1, 'content': [{'end': 119.449, 'text': "There's just a steeper learning curve.", 'start': 117.988, 'duration': 1.461}, {'end': 128.036, 'text': "So if you start there, it's pretty easy actually to fall back onto class-based components if you end up being on a project that uses them.", 'start': 120.11, 'duration': 7.926}, {'end': 136.322, 'text': "So if you're just starting out or if you're currently using class-based components, I strongly recommend using function-based components.", 'start': 128.716, 'duration': 7.606}, {'end': 142.969, 'text': "Next up, don't think about your React functional components as templates.", 'start': 138.826, 'duration': 4.143}, {'end': 145.29, 'text': 'I mean, they kind of look like templates.', 'start': 143.649, 'duration': 1.641}, {'end': 150.213, 'text': "I mean, you imagine that this function generates some JSX and then that's it.", 'start': 145.811, 'duration': 4.402}], 'summary': 'Start with function-based components for easier transition, avoid thinking of react functional components as templates.', 'duration': 32.225, 'max_score': 117.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8117988.jpg'}, {'end': 212.361, 'src': 'embed', 'start': 186.039, 'weight': 2, 'content': [{'end': 190.204, 'text': 'then we start our fetch to our api, and this is kind of where we get into trouble.', 'start': 186.039, 'duration': 4.165}, {'end': 197.812, 'text': "now. some folks think that what happens here is that the fetch blocks the rendering, that it's synchronous,", 'start': 190.204, 'duration': 7.608}, {'end': 200.995, 'text': "that it won't render out the return until the fetch returns.", 'start': 197.812, 'duration': 3.183}, {'end': 205.22, 'text': 'but fetch is asynchronous, always has been and always will be.', 'start': 200.995, 'duration': 4.225}, {'end': 209.8, 'text': 'So what really happens is the fetch goes off and starts doing its thing.', 'start': 206.158, 'duration': 3.642}, {'end': 212.361, 'text': 'And then we drop down into the return.', 'start': 210.2, 'duration': 2.161}], 'summary': 'Fetch to api is asynchronous, does not block rendering.', 'duration': 26.322, 'max_score': 186.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8186039.jpg'}, {'end': 317.211, 'src': 'embed', 'start': 285.964, 'weight': 4, 'content': [{'end': 292.188, 'text': 'but we fall through to that return because the fetch is asynchronous and we render our list of users.', 'start': 285.964, 'duration': 6.224}, {'end': 295.17, 'text': "So it actually looks on the screen like we're doing well.", 'start': 292.288, 'duration': 2.882}, {'end': 297.372, 'text': "We're actually putting up the users on the screen.", 'start': 295.29, 'duration': 2.082}, {'end': 301.895, 'text': 'But if we go over to the network tab, we can see chaos,', 'start': 297.932, 'duration': 3.963}, {'end': 309.08, 'text': "as we are repeatedly hitting that API users endpoint because we've built ourselves an infinite loop.", 'start': 301.895, 'duration': 7.185}, {'end': 317.211, 'text': "So what's really happening? Why is that happening? Well, on that second render, We get the response back from API users as we did before.", 'start': 310.421, 'duration': 6.79}], 'summary': 'Asynchronous fetch creates infinite loop, repeatedly hitting the api users endpoint.', 'duration': 31.247, 'max_score': 285.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8285964.jpg'}, {'end': 382.162, 'src': 'embed', 'start': 355.075, 'weight': 3, 'content': [{'end': 359.639, 'text': "It's going to compare the value of those and not cause a rerender if the value is the same.", 'start': 355.075, 'duration': 4.564}, {'end': 367.045, 'text': "But in the case of an array like we have here or an object or a function, it's going to compare by reference.", 'start': 360.619, 'duration': 6.426}, {'end': 375.977, 'text': "And even though the contents of those arrays are the same, references aren't, and so that's what that state setter is going to key off of.", 'start': 367.685, 'duration': 8.292}, {'end': 380.321, 'text': "it's going to cause a rerender and you're going to get the infinite loop.", 'start': 375.977, 'duration': 4.344}, {'end': 382.162, 'text': 'of course, this is actually a pretty easy fix.', 'start': 380.321, 'duration': 1.841}], 'summary': 'State setter compares by reference, causing rerender and potential infinite loop. easy fix available.', 'duration': 27.087, 'max_score': 355.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8355075.jpg'}], 'start': 6.392, 'title': 'React best practices', 'summary': 'Covers react best practices, including emphasizing functional components over class components, avoiding template thinking, and managing state updates to prevent unintended re-renders and infinite loops, leading to repetitive api calls.', 'chapters': [{'end': 209.8, 'start': 6.392, 'title': "Top 5 react do's and don'ts", 'summary': "Discusses the top 5 do's and don'ts for react development, emphasizing the use of functional components over class components, the importance of avoiding template thinking, and the asynchronous nature of fetch in react.", 'duration': 203.408, 'highlights': ['Functional components are the future of React and have better state management mechanism than class-based components, with hooks creating a vibrant ecosystem of super awesome hooks. Functional components use hooks for state management, such as useState, useReducer, useEffect, useCallback, and useMemo, creating a reactive state management model, leading to a vibrant ecosystem of hooks for various functionalities.', "It's recommended to use functional components and avoid class components, as they have a steeper learning curve and lack access to the vibrant ecosystem of hooks available for functional components. Starting with functional components is recommended due to their future in React, better state management mechanism, and access to a vibrant ecosystem of hooks, despite a steeper learning curve compared to class-based components.", 'The asynchronous nature of fetch in React is highlighted, emphasizing that fetch is asynchronous and does not block rendering, contrary to common misconceptions. The chapter emphasizes the asynchronous nature of fetch in React, debunking the misconception that fetch blocks rendering and is synchronous, highlighting its asynchronous behavior.']}, {'end': 375.977, 'start': 210.2, 'title': 'React state setter and rerendering', 'summary': 'Explains how setting state in react can cause unintended re-renders and infinite loops due to the comparison of state using triple equals, leading to repetitive api calls and the need for careful management of state updates and re-renders.', 'duration': 165.777, 'highlights': ['When setting state in React, the comparison of state uses triple equals, leading to re-renders based on reference rather than content. The state setter in React compares the old value with the new value using triple equals, causing re-renders based on reference rather than content, leading to unexpected behavior.', 'Unintended re-renders and infinite loops can occur when state updates lead to repetitive API calls. Unintended re-renders and infinite loops can occur when state updates lead to repetitive API calls, causing chaos and potential performance issues.', 'Careful management of state updates and re-renders is essential to avoid unnecessary API requests and optimize performance. Careful management of state updates and re-renders is essential to avoid unnecessary API requests and optimize performance, highlighting the importance of understanding how state updates trigger re-renders in React.']}], 'duration': 369.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS86392.jpg', 'highlights': ['Functional components use hooks for state management, such as useState, useReducer, useEffect, useCallback, and useMemo, creating a reactive state management model, leading to a vibrant ecosystem of hooks for various functionalities.', "It's recommended to use functional components and avoid class components, as they have a steeper learning curve and lack access to the vibrant ecosystem of hooks available for functional components.", 'The asynchronous nature of fetch in React is highlighted, emphasizing that fetch is asynchronous and does not block rendering, contrary to common misconceptions.', 'The state setter in React compares the old value with the new value using triple equals, causing re-renders based on reference rather than content, leading to unexpected behavior.', 'Unintended re-renders and infinite loops can occur when state updates lead to repetitive API calls, causing chaos and potential performance issues.', 'Careful management of state updates and re-renders is essential to avoid unnecessary API requests and optimize performance, highlighting the importance of understanding how state updates trigger re-renders in React.']}, {'end': 615.921, 'segs': [{'end': 403.319, 'src': 'embed', 'start': 375.977, 'weight': 2, 'content': [{'end': 380.321, 'text': "it's going to cause a rerender and you're going to get the infinite loop.", 'start': 375.977, 'duration': 4.344}, {'end': 382.162, 'text': 'of course, this is actually a pretty easy fix.', 'start': 380.321, 'duration': 1.841}, {'end': 394.033, 'text': "all we need to do is wrap this fetch in a use effect and then give it an empty dependency array which tells react that you're only going to ever run this use effect once on the mount of the component.", 'start': 382.162, 'duration': 11.871}, {'end': 403.319, 'text': 'So you can see how this template mindset gets you into some troubles and paints a false picture of how React works.', 'start': 395.854, 'duration': 7.465}], 'summary': 'Fix the infinite loop by wrapping fetch in a useeffect with an empty dependency array.', 'duration': 27.342, 'max_score': 375.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8375977.jpg'}, {'end': 476.143, 'src': 'embed', 'start': 444.411, 'weight': 3, 'content': [{'end': 449.735, 'text': "The first one is that somehow TypeScript doesn't belong on the client,", 'start': 444.411, 'duration': 5.324}, {'end': 457.62, 'text': "as if there's some exclusive enterprise club where you use strongly typed or typed languages like TypeScript.", 'start': 449.735, 'duration': 7.885}, {'end': 461.923, 'text': "And that's just, I don't know, I can't even justify that.", 'start': 458.441, 'duration': 3.482}, {'end': 467.727, 'text': 'TypeScript helps you make more robust, more reliable, easier to maintain applications.', 'start': 462.483, 'duration': 5.244}, {'end': 476.143, 'text': "So why wouldn't you want to use it in your React app? It has saved my butt so many times and I've only been using it for the last two, three years.", 'start': 468.257, 'duration': 7.886}], 'summary': 'Typescript enhances reliability and maintainability of react apps, saving time and effort.', 'duration': 31.732, 'max_score': 444.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8444411.jpg'}, {'end': 558.945, 'src': 'embed', 'start': 511.937, 'weight': 0, 'content': [{'end': 514.378, 'text': "In fact, actually, sometimes I wish it would do that, and it doesn't.", 'start': 511.937, 'duration': 2.441}, {'end': 518.967, 'text': "So it absolutely doesn't bloat your code.", 'start': 515.325, 'duration': 3.642}, {'end': 524.453, 'text': 'And then the third objection is something along the lines of TypeScript makes my code ugly.', 'start': 520.089, 'duration': 4.364}, {'end': 528.036, 'text': "And okay, maybe that's got a point.", 'start': 525.294, 'duration': 2.742}, {'end': 530.198, 'text': "And it's a subjective thing.", 'start': 528.757, 'duration': 1.441}, {'end': 532.941, 'text': 'I actually think TypeScript looks pretty good,', 'start': 530.298, 'duration': 2.643}, {'end': 541.268, 'text': "but let's see if the value of TypeScript in a React app is worth the potential ugliness that you think might be in the code.", 'start': 532.941, 'duration': 8.327}, {'end': 547.881, 'text': 'So there are two times when TypeScript really genuinely touches a React app.', 'start': 542.58, 'duration': 5.301}, {'end': 554.063, 'text': "The first is when you're defining your types, like the kind of data shapes that come back from the server.", 'start': 548.082, 'duration': 5.981}, {'end': 558.945, 'text': "And the other time is when you're defining your React components.", 'start': 555.083, 'duration': 3.862}], 'summary': 'Typescript adds value to react by defining types and components.', 'duration': 47.008, 'max_score': 511.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8511937.jpg'}, {'end': 618.825, 'src': 'embed', 'start': 595.285, 'weight': 1, 'content': [{'end': 603.172, 'text': "And if we change the fields, we change them all over the place and we check all that at build time to make sure that it's always correct,", 'start': 595.285, 'duration': 7.887}, {'end': 603.693, 'text': 'which is great.', 'start': 603.172, 'duration': 0.521}, {'end': 606.996, 'text': 'And the other thing is check out that little question mark next to address.', 'start': 604.353, 'duration': 2.643}, {'end': 610.559, 'text': 'That tells TypeScript that address could potentially be null.', 'start': 607.356, 'duration': 3.203}, {'end': 615.921, 'text': "So it needs to check everywhere we use address to make sure that we're checking for null.", 'start': 611.294, 'duration': 4.627}, {'end': 618.825, 'text': 'So say goodbye to those null dereference errors.', 'start': 616.441, 'duration': 2.384}], 'summary': 'Typescript checks for null addresses to prevent errors.', 'duration': 23.54, 'max_score': 595.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8595285.jpg'}], 'start': 375.977, 'title': 'Typescript and react best practices', 'summary': 'Discusses best practices for react functional components, highlighting the use of useeffect to avoid infinite loops, the importance of using typescript for reliability and maintainability, and the benefits of typescript in ensuring data consistency and handling potential null values at build time.', 'chapters': [{'end': 532.941, 'start': 375.977, 'title': 'React functional components best practices', 'summary': 'Discusses best practices for react functional components, emphasizing the use of useeffect for avoiding infinite loops, the importance of using typescript for building more reliable and maintainable applications, and debunking common objections against typescript.', 'duration': 156.964, 'highlights': ['Using useEffect to avoid infinite loops Wrapping the fetch in a useEffect with an empty dependency array prevents infinite loops.', 'Emphasizing the use of TypeScript Using TypeScript leads to more robust, reliable, and easier to maintain applications, with the speaker highlighting personal positive experiences.', 'Debunking objections against TypeScript The speaker addresses and refutes objections about TypeScript not belonging on the client, bloating code at runtime, and making code ugly, highlighting that TypeScript does not bloat code and its appearance is subjective.']}, {'end': 615.921, 'start': 532.941, 'title': 'Typescript in react: evaluating value', 'summary': 'Explores the value of typescript in a react app by examining how it helps in defining data shapes and react components. it demonstrates the benefits of using typescript in ensuring data consistency and handling potential null values at build time.', 'duration': 82.98, 'highlights': ['Using TypeScript to define data shapes ensures data consistency and accuracy at build time, reducing errors and enhancing code quality.', 'The ability of TypeScript to handle potential null values at build time ensures safer code and reduces runtime errors.']}], 'duration': 239.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8375977.jpg', 'highlights': ['Using TypeScript to define data shapes ensures data consistency and accuracy at build time, reducing errors and enhancing code quality.', 'The ability of TypeScript to handle potential null values at build time ensures safer code and reduces runtime errors.', 'Using useEffect to avoid infinite loops Wrapping the fetch in a useEffect with an empty dependency array prevents infinite loops.', 'Emphasizing the use of TypeScript Using TypeScript leads to more robust, reliable, and easier to maintain applications, with the speaker highlighting personal positive experiences.', 'Debunking objections against TypeScript The speaker addresses and refutes objections about TypeScript not belonging on the client, bloating code at runtime, and making code ugly, highlighting that TypeScript does not bloat code and its appearance is subjective.']}, {'end': 1033.271, 'segs': [{'end': 728.216, 'src': 'embed', 'start': 698.313, 'weight': 0, 'content': [{'end': 702.235, 'text': "you get hinted about what's coming back and all the fields that are on that person.", 'start': 698.313, 'duration': 3.922}, {'end': 707.718, 'text': 'Super, super convenient and a much better way to define components.', 'start': 703.015, 'duration': 4.703}, {'end': 712.32, 'text': "So now all we have to do is just get rid of the prop types and we've converted to TypeScript.", 'start': 708.398, 'duration': 3.922}, {'end': 715.009, 'text': 'Not that bad and not that ugly.', 'start': 713.188, 'duration': 1.821}, {'end': 716.33, 'text': "That's what I'm talking about.", 'start': 715.029, 'duration': 1.301}, {'end': 720.372, 'text': 'TypeScript is awesome and you should definitely use it to build your React apps.', 'start': 716.75, 'duration': 3.622}, {'end': 724.134, 'text': "This one's kind of a pet peeve for me.", 'start': 722.853, 'duration': 1.281}, {'end': 728.216, 'text': "Don't worry about React rerenders too much.", 'start': 725.075, 'duration': 3.141}], 'summary': 'Transitioning to typescript for defining components in react is super convenient and not that bad or ugly. typescript is awesome for building react apps.', 'duration': 29.903, 'max_score': 698.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8698313.jpg'}, {'end': 892.953, 'src': 'embed', 'start': 798.505, 'weight': 2, 'content': [{'end': 804.108, 'text': "And then it's up to React to actually traverse that VDOM tree and then synchronize it with the real DOM tree.", 'start': 798.505, 'duration': 5.603}, {'end': 806.189, 'text': "That's why it's called a VDOM framework.", 'start': 804.428, 'duration': 1.761}, {'end': 809.151, 'text': 'And it adds any nodes that it needs to add,', 'start': 807.05, 'duration': 2.101}, {'end': 814.494, 'text': "deletes any nodes that it needs to delete and it updates any nodes that are different than what's in the VDOM.", 'start': 809.151, 'duration': 5.343}, {'end': 818.537, 'text': "But if there's no changes, then nothing happens.", 'start': 815.435, 'duration': 3.102}, {'end': 824.762, 'text': 'So I did a test a couple weeks back where I created a list, and that list had 500 names in it.', 'start': 820.08, 'duration': 4.682}, {'end': 826.262, 'text': 'Each one created its own div.', 'start': 825.062, 'duration': 1.2}, {'end': 828.803, 'text': 'And that first render, yeah, it was slow.', 'start': 827.163, 'duration': 1.64}, {'end': 831.604, 'text': 'It took 100 milliseconds to go and create those 500 divs.', 'start': 828.823, 'duration': 2.781}, {'end': 832.805, 'text': "It's slow.", 'start': 832.425, 'duration': 0.38}, {'end': 840.008, 'text': 'But the second render, the rerender where nothing had changed, was sub-millisecond.', 'start': 833.605, 'duration': 6.403}, {'end': 843.509, 'text': "So you don't need to worry about rerenders so much.", 'start': 841.388, 'duration': 2.121}, {'end': 847.594, 'text': "In fact, if you're getting a lot of renders, it's probably just a bug.", 'start': 844.912, 'duration': 2.682}, {'end': 852.136, 'text': "It's probably a use effect that has gone into an infinite loop because of a bad dependency array.", 'start': 847.794, 'duration': 4.342}, {'end': 856.519, 'text': "But if you're legitimately seeing performance problems,", 'start': 853.037, 'duration': 3.482}, {'end': 861.622, 'text': 'there are a lot of tools baked right into React to help you diagnose and fix those performance problems.', 'start': 856.519, 'duration': 5.103}, {'end': 866.161, 'text': "But my strong recommendation, is don't fight the framework.", 'start': 862.582, 'duration': 3.579}, {'end': 874.786, 'text': "Don't try to prematurely optimize your application by worrying so much about whether or not specific components are re-rendering.", 'start': 866.281, 'duration': 8.505}, {'end': 882.49, 'text': 'do learn to love dependency arrays, or at least deal with them or not hate them quite so much.', 'start': 876.408, 'duration': 6.082}, {'end': 888.692, 'text': 'So dependency arrays are the arrays at the end of useEffect, useMemo, and useCallback.', 'start': 883.09, 'duration': 5.602}, {'end': 892.953, 'text': 'And they tell React when, for example, your effect should run.', 'start': 888.892, 'duration': 4.061}], 'summary': 'React efficiently updates vdom, reducing render time from 100ms to sub-millisecond for 500 divs; recommends not to prematurely optimize and to use dependency arrays.', 'duration': 94.448, 'max_score': 798.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8798505.jpg'}], 'start': 616.441, 'title': 'Typescript and react performance optimization', 'summary': "Covers the process of converting javascript components to typescript, emphasizing benefits of type checking and advantages of typescript for react apps. it also discusses the impact of dependency arrays in react's useeffect, usememo, and usecallback on performance, and the importance of react lint rules in detecting missing dependency arrays.", 'chapters': [{'end': 818.537, 'start': 616.441, 'title': 'Typescript for react components', 'summary': 'Explains the process of converting a javascript component to a typescript component, highlighting the benefits of type checking at build time and the misconception around react rerenders, while emphasizing the advantages of using typescript for building react apps.', 'duration': 202.096, 'highlights': ['TypeScript provides type checking at build time for React components, avoiding the need to traverse the entire application and watch console logs for errors. TypeScript allows defining component props and their types, providing compile-time checking, which eliminates the runtime prop type checking and the need to manually inspect the usage of the component throughout the application.', 'Using TypeScript for React components allows for defining the callback argument type, providing better hinting and convenience during component usage. TypeScript enables specifying the argument type for callbacks, such as onClick, providing improved developer experience by hinting about the expected data and its structure during component usage.', "React rerenders are often misunderstood, as React utilizes a virtual DOM framework to efficiently update the actual DOM, making rerenders less of a concern. The explanation of React's virtual DOM framework clarifies the process of creating, updating, and synchronizing the virtual DOM with the real DOM, emphasizing that React rerenders are efficiently managed by the framework."]}, {'end': 1033.271, 'start': 820.08, 'title': 'React performance optimization', 'summary': "Discusses the importance of dependency arrays in react's useeffect, usememo, and usecallback, emphasizing the impact on performance and the prevention of infinite loops, as well as the significance of react lint rules in detecting missing dependency arrays.", 'duration': 213.191, 'highlights': ['The first render of 500 divs took 100 milliseconds, but the rerender was sub-millisecond, indicating that rerenders may not be a concern in performance optimization. First render of 500 divs took 100 milliseconds, while the rerender was sub-millisecond, showcasing the potential insignificance of rerenders in performance optimization.', "Emphasizes the importance of using dependency arrays in React's useEffect, useMemo, and useCallback to control when effects should run and avoid infinite loops. Stresses the significance of using dependency arrays in React's useEffect, useMemo, and useCallback to regulate when effects should run and prevent infinite loops.", 'Recommends not to prematurely optimize applications by worrying excessively about specific component rerenders and advises not to disable React lint rules, which detect missing dependency arrays. Suggests not to prematurely optimize applications by excessively worrying about specific component rerenders and advises against disabling React lint rules, which identify missing dependency arrays.']}], 'duration': 416.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS8616441.jpg', 'highlights': ['TypeScript provides compile-time checking for React components, eliminating the need for runtime prop type checking and manual inspection.', 'Using TypeScript for React components allows defining callback argument types, providing better hinting and convenience during usage.', 'React rerenders are efficiently managed by the virtual DOM framework, making them less of a concern for performance optimization.', 'First render of 500 divs took 100 milliseconds, while the rerender was sub-millisecond, showcasing potential insignificance of rerenders in performance optimization.', "Using dependency arrays in React's useEffect, useMemo, and useCallback is crucial to regulate when effects should run and prevent infinite loops.", 'Prematurely optimizing applications by excessively worrying about specific component rerenders is discouraged, and React lint rules should not be disabled.']}, {'end': 1322.505, 'segs': [{'end': 1098.064, 'src': 'embed', 'start': 1034.09, 'weight': 2, 'content': [{'end': 1035.251, 'text': "It's a great rule.", 'start': 1034.09, 'duration': 1.161}, {'end': 1038.712, 'text': 'I use it all the time and I do React every day.', 'start': 1035.432, 'duration': 3.28}, {'end': 1046.374, 'text': 'So another thing to watch out for when it comes to dependency arrays is when you have an array or an object or a function in your dependency array.', 'start': 1039.272, 'duration': 7.102}, {'end': 1059.418, 'text': 'Because React uses the same logic that it uses in that state setter to decide whether the value is the same or different between the old value and the new value.', 'start': 1047.315, 'duration': 12.103}, {'end': 1065.105, 'text': 'And for strings and Booleans and numbers, it does it by value, which is really predictable.', 'start': 1060.123, 'duration': 4.982}, {'end': 1072.748, 'text': "But when it comes to arrays and objects and functions, it doesn't look at the contents.", 'start': 1065.725, 'duration': 7.023}, {'end': 1075.769, 'text': 'It does not do a deep compare like some people think it does.', 'start': 1072.848, 'duration': 2.921}, {'end': 1078.73, 'text': 'It instead does a referential compare.', 'start': 1076.269, 'duration': 2.461}, {'end': 1084.797, 'text': "Is this exactly the same array? And I've seen lots of hacks around this.", 'start': 1078.87, 'duration': 5.927}, {'end': 1094.262, 'text': "I've seen people go and do join where they turn an array into a string or they do a JSON stringify to turn it into a string,", 'start': 1084.837, 'duration': 9.425}, {'end': 1096.343, 'text': 'to do kind of a deep clone and compare.', 'start': 1094.262, 'duration': 2.081}, {'end': 1098.064, 'text': 'But those are just hacks.', 'start': 1097.263, 'duration': 0.801}], 'summary': "React's dependency arrays use referential compare, not deep compare, for arrays and objects.", 'duration': 63.974, 'max_score': 1034.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81034089.jpg'}, {'end': 1145.752, 'src': 'embed', 'start': 1121.155, 'weight': 0, 'content': [{'end': 1126.979, 'text': 'Now, there was some advice that went around about how useCallback and useMemo impact the performance of a React app.', 'start': 1121.155, 'duration': 5.824}, {'end': 1129.04, 'text': 'That is absolutely untrue.', 'start': 1127.019, 'duration': 2.021}, {'end': 1138.607, 'text': 'They are vital to the reactive state management model of React and, when used properly to retain referential identity,', 'start': 1129.12, 'duration': 9.487}, {'end': 1142.269, 'text': 'they can be a performance enhancement to your application.', 'start': 1138.607, 'duration': 3.662}, {'end': 1145.752, 'text': "So let's take a look at these two awesome hooks in isolation.", 'start': 1143.069, 'duration': 2.683}], 'summary': 'Usecallback and usememo are vital for performance in react app', 'duration': 24.597, 'max_score': 1121.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81121155.jpg'}, {'end': 1229.886, 'src': 'heatmap', 'start': 1174.145, 'weight': 0.82, 'content': [{'end': 1177.647, 'text': 'This first one is calculating a total from a bunch of costs.', 'start': 1174.145, 'duration': 3.502}, {'end': 1185.432, 'text': "So this is calculating a number which doesn't fall into our first rule about an object or an array,", 'start': 1178.027, 'duration': 7.405}, {'end': 1191.795, 'text': "but it could be a potentially costly operation because we don't know how big the cost array is.", 'start': 1185.432, 'duration': 6.363}, {'end': 1193.897, 'text': 'Okay, so there you go.', 'start': 1192.576, 'duration': 1.321}, {'end': 1195.738, 'text': "That's a good use for useMemo.", 'start': 1193.917, 'duration': 1.821}, {'end': 1200.901, 'text': 'Now, the second example is where we have a list of people and we want to sort them.', 'start': 1196.977, 'duration': 3.924}, {'end': 1202.843, 'text': "So we're creating an array.", 'start': 1201.101, 'duration': 1.742}, {'end': 1207.547, 'text': "So it falls into our first rule and we're doing a sort, which is potentially expensive.", 'start': 1202.923, 'duration': 4.624}, {'end': 1209.609, 'text': 'So it falls into our second rule as well.', 'start': 1207.567, 'duration': 2.042}, {'end': 1212.652, 'text': 'Now, our third example is far simpler.', 'start': 1211.19, 'duration': 1.462}, {'end': 1216.696, 'text': "We're building a full name out of a conjunction of a first and a last name.", 'start': 1212.752, 'duration': 3.944}, {'end': 1219.66, 'text': "And that's not good for either rule.", 'start': 1217.699, 'duration': 1.961}, {'end': 1222.902, 'text': "One, you're building a string, so there's no referential identity problem.", 'start': 1220.1, 'duration': 2.802}, {'end': 1225.183, 'text': 'And two, just really easy to do.', 'start': 1223.082, 'duration': 2.101}, {'end': 1229.886, 'text': "So there's no reason not to just turn this into a const write inline.", 'start': 1225.503, 'duration': 4.383}], 'summary': 'Transcript covers usememo usage and potential costly operations in sorting and string manipulation.', 'duration': 55.741, 'max_score': 1174.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81174145.jpg'}], 'start': 1034.09, 'title': 'React performance optimization', 'summary': 'Discusses react dependency arrays and the limitations in comparison logic, emphasizing the importance of using usecallback and usememo to optimize react performance, with efficient and inefficient use cases.', 'chapters': [{'end': 1098.064, 'start': 1034.09, 'title': 'React dependency arrays', 'summary': 'Discusses the importance of understanding react dependency arrays, highlighting the need to avoid using arrays, objects, or functions in the dependency array and the limitations in comparison logic for arrays, objects, and functions, leading to the use of hacks such as join and json stringify.', 'duration': 63.974, 'highlights': ['React uses the same logic as the state setter to decide whether the value is the same or different between the old value and the new value.', 'It does not do a deep compare for arrays, objects, and functions in the dependency array; instead, it does a referential compare, leading to the use of hacks like join and JSON stringify.', "People use hacks like join and JSON stringify to turn arrays into strings and perform deep clone and compare due to the limitations in React's comparison logic."]}, {'end': 1322.505, 'start': 1098.724, 'title': 'Optimizing react performance with usecallback and usememo', 'summary': 'Emphasizes the importance of using usecallback and usememo to optimize react performance by retaining referential identity and avoiding unnecessary recalculations, with examples of efficient and inefficient use cases, such as computing arrays, sorting lists, and creating expensive operations.', 'duration': 223.781, 'highlights': ['The importance of retaining referential identity and avoiding unnecessary recalculations by using useCallback and useMemo to optimize React performance is emphasized. importance of retaining referential identity, avoiding unnecessary recalculations, optimizing React performance', 'Examples of efficient and inefficient use cases for useMemo, such as computing arrays, sorting lists, and creating expensive operations, are provided to illustrate its benefits in maintaining referential identity and improving performance. efficient and inefficient use cases for useMemo, computing arrays, sorting lists, expensive operations, benefits of maintaining referential identity, improving performance', 'The significance of retaining referential identity and preventing unnecessary recalculations by using useCallback for callback functions in React is explained through examples, highlighting its impact on performance optimization. retaining referential identity, preventing unnecessary recalculations, using useCallback for callback functions, performance optimization']}], 'duration': 288.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81034089.jpg', 'highlights': ['Examples of efficient and inefficient use cases for useMemo, such as computing arrays, sorting lists, and creating expensive operations, are provided to illustrate its benefits in maintaining referential identity and improving performance.', 'The significance of retaining referential identity and preventing unnecessary recalculations by using useCallback for callback functions in React is explained through examples, highlighting its impact on performance optimization.', 'React uses the same logic as the state setter to decide whether the value is the same or different between the old value and the new value.', 'It does not do a deep compare for arrays, objects, and functions in the dependency array; instead, it does a referential compare, leading to the use of hacks like join and JSON stringify.', "People use hacks like join and JSON stringify to turn arrays into strings and perform deep clone and compare due to the limitations in React's comparison logic."]}, {'end': 1801.965, 'segs': [{'end': 1366.058, 'src': 'embed', 'start': 1323.746, 'weight': 0, 'content': [{'end': 1327.947, 'text': 'The way to get around this is to use useCallback and build the sort function that way.', 'start': 1323.746, 'duration': 4.201}, {'end': 1333.929, 'text': 'And then, when I pass it on, I can be assured that every single time that I call that name list,', 'start': 1328.127, 'duration': 5.802}, {'end': 1338.61, 'text': "I'm using exactly the same sort function and therefore that useMemo will not be tripped.", 'start': 1333.929, 'duration': 4.681}, {'end': 1343.392, 'text': 'So as you can see, these are vitally important hooks that you should not ignore.', 'start': 1339.731, 'duration': 3.661}, {'end': 1348.269, 'text': 'So do make and use your own custom hooks.', 'start': 1345.287, 'duration': 2.982}, {'end': 1354.912, 'text': 'So custom hooks are collections of hooks gathered together as a function that accomplishes a specific task.', 'start': 1348.969, 'duration': 5.943}, {'end': 1359.634, 'text': 'And we are well on our way to making one of those over in our user list component,', 'start': 1355.652, 'duration': 3.982}, {'end': 1366.058, 'text': 'where we have our use state and our use effect that work together to fetch data from that API and store it locally.', 'start': 1359.634, 'duration': 6.424}], 'summary': 'Using usecallback and usememo for consistent sort function, emphasizing custom hooks.', 'duration': 42.312, 'max_score': 1323.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81323746.jpg'}, {'end': 1454.566, 'src': 'embed', 'start': 1421.424, 'weight': 3, 'content': [{'end': 1423.746, 'text': 'You could use MobX or a bunch of different external state managers.', 'start': 1421.424, 'duration': 2.322}, {'end': 1429.951, 'text': 'But a couple of years back, when we got custom hooks and the reactive state model built into React,', 'start': 1424.827, 'duration': 5.124}, {'end': 1438.554, 'text': "The idea of requiring effectively an external state manager like Redux didn't become as important.", 'start': 1431.328, 'duration': 7.226}, {'end': 1447.1, 'text': 'You can now go and use context and hooks to maintain state globally and closer to where you actually used it.', 'start': 1439.214, 'duration': 7.886}, {'end': 1454.566, 'text': "When you're thinking about building out your application and choosing your state management model.", 'start': 1449.963, 'duration': 4.603}], 'summary': "With custom hooks and reactive state model in react, external state managers like redux are less important; context and hooks can maintain state globally and closely to where it's used.", 'duration': 33.142, 'max_score': 1421.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81421424.jpg'}, {'end': 1525.106, 'src': 'embed', 'start': 1499.462, 'weight': 6, 'content': [{'end': 1506.468, 'text': "But if that doesn't do it, of course you could use Redux, although I strongly recommend using the Redux toolkit.", 'start': 1499.462, 'duration': 7.006}, {'end': 1511.673, 'text': 'If you do it, greatly simplifies the Redux development experience.', 'start': 1506.709, 'duration': 4.964}, {'end': 1517.999, 'text': "plus, it's got a fantastic query library built right into it, which is kind of the Redux analog of React Query.", 'start': 1511.673, 'duration': 6.326}, {'end': 1519.701, 'text': 'But there are also other ones.', 'start': 1518.96, 'duration': 0.741}, {'end': 1525.106, 'text': "There's Recoil and Jotai, which are fantastic atomic state managers.", 'start': 1520.181, 'duration': 4.925}], 'summary': 'Use redux toolkit for simplified development, with built-in query library. other options include recoil and jotai.', 'duration': 25.644, 'max_score': 1499.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81499462.jpg'}, {'end': 1672.065, 'src': 'embed', 'start': 1648.426, 'weight': 4, 'content': [{'end': 1659.829, 'text': 'So my strong recommendation to you is, if you plan on doing any kind of API access in your application, is either use React Query or SWR or RTK,', 'start': 1648.426, 'duration': 11.403}, {'end': 1662.93, 'text': "the React Redux Toolkit and its query that's built in.", 'start': 1659.829, 'duration': 3.101}, {'end': 1668.592, 'text': "These are phenomenal libraries and you're doing yourself a big disservice by not using them or rolling your own.", 'start': 1662.95, 'duration': 5.642}, {'end': 1672.065, 'text': "Here's one that's really near and dear to my heart.", 'start': 1670.523, 'duration': 1.542}], 'summary': 'Use react query, swr, or rtk for api access in your application, as they are phenomenal libraries.', 'duration': 23.639, 'max_score': 1648.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81648426.jpg'}, {'end': 1725.577, 'src': 'embed', 'start': 1700.005, 'weight': 5, 'content': [{'end': 1707.892, 'text': "they've got great documentation and examples and a whole user community around them that make it very easy to use them.", 'start': 1700.005, 'duration': 7.887}, {'end': 1716.55, 'text': 'Plus, and this is almost as important, or more important is, many of these libraries in particular, like Material UI,', 'start': 1709.104, 'duration': 7.446}, {'end': 1721.053, 'text': "come with templates for a lot of designers' favorite tools.", 'start': 1716.55, 'duration': 4.503}, {'end': 1722.114, 'text': 'For example, Figma.', 'start': 1721.093, 'duration': 1.021}, {'end': 1725.577, 'text': "There's a Figma template for Material UI, and it's great.", 'start': 1722.174, 'duration': 3.403}], 'summary': 'Libraries like material ui have strong community support and provide templates for popular design tools like figma.', 'duration': 25.572, 'max_score': 1700.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81700005.jpg'}], 'start': 1323.746, 'title': 'React best practices', 'summary': 'Discusses the importance of usecallback and custom hooks in react for reusability and isolation testing, while also emphasizing the significance of using context and hooks for state management, recommending react query or swr for api requests, and promoting the use of existing ui libraries like material ui for better communication between design and development teams.', 'chapters': [{'end': 1391.536, 'start': 1323.746, 'title': 'Custom hooks and usecallback in react', 'summary': 'Discusses the importance of usecallback and custom hooks in react, emphasizing the benefits of creating custom hooks for reusability and isolation testing.', 'duration': 67.79, 'highlights': ['Custom hooks are collections of hooks gathered together as a function that accomplishes a specific task. Custom hooks are functions that combine multiple hooks to achieve a specific functionality, promoting reusability and code organization.', 'The use of useCallback ensures that the same sort function is used every time, preventing unnecessary re-renders. Utilizing useCallback with the sort function ensures consistent usage and prevents unnecessary re-renders, optimizing performance.', 'Creating custom hooks allows for isolation testing and reusability across different components. Custom hooks enable the testing of specific functionality in isolation and promote reuse across multiple components, enhancing maintainability and testability.']}, {'end': 1801.965, 'start': 1391.776, 'title': 'React state management and ui libraries', 'summary': 'Emphasizes the importance of using context and hooks for state management in react, recommending react query or swr for api requests, and advises against building custom ui libraries, promoting the use of existing ones like material ui and others for better communication between design and development teams.', 'duration': 410.189, 'highlights': ['The chapter recommends starting with using context and hooks for state management in React, and suggests using React Query or SWR for API requests. Using context and hooks for state management is recommended, and React Query or SWR is suggested for API requests.', 'The chapter advises against building custom UI libraries and promotes the use of existing ones like Material UI, which provides templates for designers and better communication between design and development teams. The chapter advises against building custom UI libraries and promotes the use of existing ones like Material UI, which provides templates for designers and better communication between design and development teams.', 'The chapter warns against using Redux just because and recommends using it only if necessary, along with the Redux toolkit for simplifying the development experience. The chapter warns against using Redux just because and recommends using it only if necessary, along with the Redux toolkit for simplifying the development experience.']}], 'duration': 478.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4FhJkX18fS8/pics/4FhJkX18fS81323746.jpg', 'highlights': ['Custom hooks promote reusability and code organization.', 'Utilizing useCallback with the sort function optimizes performance.', 'Custom hooks enable isolation testing and promote reuse across components.', 'Using context and hooks for state management is recommended.', 'React Query or SWR is suggested for API requests.', 'Material UI provides templates for designers and better communication between teams.', 'Redux should be used only if necessary, along with the Redux toolkit.']}], 'highlights': ['Using TypeScript to define data shapes ensures data consistency and accuracy at build time, reducing errors and enhancing code quality.', 'The ability of TypeScript to handle potential null values at build time ensures safer code and reduces runtime errors.', 'Functional components use hooks for state management, such as useState, useReducer, useEffect, useCallback, and useMemo, creating a reactive state management model, leading to a vibrant ecosystem of hooks for various functionalities.', "It's recommended to use functional components and avoid class components, as they have a steeper learning curve and lack access to the vibrant ecosystem of hooks available for functional components.", 'The asynchronous nature of fetch in React is highlighted, emphasizing that fetch is asynchronous and does not block rendering, contrary to common misconceptions.', 'Using useEffect to avoid infinite loops Wrapping the fetch in a useEffect with an empty dependency array prevents infinite loops.', 'Emphasizing the use of TypeScript Using TypeScript leads to more robust, reliable, and easier to maintain applications, with the speaker highlighting personal positive experiences.', 'Custom hooks promote reusability and code organization.', 'Utilizing useCallback with the sort function optimizes performance.', 'Custom hooks enable isolation testing and promote reuse across components.', 'Using context and hooks for state management is recommended.', 'React Query or SWR is suggested for API requests.', 'Material UI provides templates for designers and better communication between teams.', 'Redux should be used only if necessary, along with the Redux toolkit.', 'Debunking objections against TypeScript The speaker addresses and refutes objections about TypeScript not belonging on the client, bloating code at runtime, and making code ugly, highlighting that TypeScript does not bloat code and its appearance is subjective.']}