Intermediate React, v3

Brian Holt introduces the course, briefly describes prerequisites, and provides resources including the course website and GitHub repository that will be used throughout the course.

Brian demonstrates the useState hook using a premade code sandbox and answers students questions regarding what is re-rendered when setIsGreen is called and how to specify a component that should not be re rendered. The useState hook holds the application's state which then can be used to update function parameters.

Brian demonstrates useEffect in a timer example which re-renders every second and answers student questions regarding if the effect will only render once with an empty array, where useEffect can be used, and how promises are handled with useEffect. Effects are similar to the componentDidMount, componentDidUpdate, and componentDidMount lifecycle methods in React.

Brian discusses an early problem with React called "data tunneling" or "prop drilling" and how useContext can be used to pass down data from a parent component to a child component directly. Questions about the second argument in useContext and if Redux and useContext are similar are also covered in this segment.

Brian discusses how the useRef hook holds a piece of state through multiple re-rendering cycles. A student's question regarding if useRef contains the original or a copy of the object is also covered in this segment.

Brian demonstrates how the useReducer hook can be used to allow state to be treated like a local Redux store by walking through and making adjustments to a prewritten rgb component. A student's question regarding if useContext and useReducer could be used to recreate Redux is also covered in this segment.

Brian demonstrates how the useMemo hook can be used for performance optimization with a Fibonacci calculator. The useMemo hook can be used to memoize expensive function calls and only call them again when needed. Student questions regarding why the title color changes, if useEffect could be used instead of useMemo to accomplish the same goal, and if useMemo could be used to avoid multiple API calls are also covered in this segment.

Brian demonstrates how to use the useCallback hook with React.memo to re-render an expensive computation only when absolutely necessary. The useCallback hook takes in a function and returns a memoized version of the callback only when one of the dependencies are called.

Brian discusses the similarities between useEffect and useLayoutEffect and explains that useLayoutEffect is executed synchronous with specific mutations on the DOM. The useLayoutEffect hook can block visual updates and should only be used to measure DOM nodes for things like animations. A student's question regarding how to set the default width and height of the example textbox is also covered in this segment.

Brian demonstrates how to use the useImperativeHandle hook in conjunction with forwardRef and React.focus to allow the child component to customize the value given back to the parent component. The useImperativeHandle hook is typically used by library authors to allow users to call internal functions.

Brian discusses the useDebugValue hook and it's typical application by library authors for displaying a label for custom hooks in the React DevTools. This hook can be used similarly to a console.log for a custom hook to help with debugging. A student's question regarding if all callbacks should be wrapped in useMemo is also covered in this segment.

Brian discusses this course's history, some personal history with CSS and React, and the benefits and drawbacks of different methods of styling in React including standard CSS, emotion, and Tailwind CSS. A brief overview of the provided code repository is also covered in this segment.

Brian walks through setting up Tailwind and discusses the different packages that are being installed along with TailwindCSS including Autoprefixer. The contents of the .bin folder, how they are connected to the executed npx commands, ignoring rules in Visual Studio Code, and installing TailwindCSS IntelliSense are also covered in this segment.

Brian demonstrates how to apply basic styling including padding, margin, background images, and adding a gradient to the application using TailwindCSS. The CSS is applied by writing multiple utility class names on an element which in turn avoids writing almost any CSS and greatly reduces the amount of data taken up by styling. Student's questions regarding how to switch to pixel measurements, if you can apply styles to children via a parent interaction, and how to use custom colors are also covered in this segment.

Brian live codes the Tailwind form styling in the SearchParams.js file including drop shadows, flexbox layout, and aligning items on a grid.

Brian demonstrates how to install and use a Tailwind plugin that applies default styling to forms. The default styling can be overridden by manually styling the element with TailwindCSS.

Brain demonstrates how to create styling components to allow multiple elements to have the same styling in Tailwind without having to copy and paste the code to each element individually. A student's question regarding the function of PostCSS in conjunction with Tailwind is also covered in this segment.

Brian walks through how to align items with breakpoints on a responsive grid. A student's question regarding if the importance of the order of class names is also covered in this segment.

Brain demonstrates how to add positioning to the image's description containers relative to the image and shares some closing thoughts on TailwindCSS. A student's question regarding if a custom rhythm can be defined is also answered in this segment.

Brian discusses the concept of code splitting and how it can be used to identify where non-essential code can be split into separate JS files and loaded later. The Suspense component and React.lazy are used to speed up initial page loads by only loading necessary JavaScript.

Brian demonstrates how to code split within a component. Using code splitting to make large modals load asynchronously can help further decrease the page load time. Student questions about importing external CSS using lazy, adding pre-fetch or pre-load, if lazy loading works outside of Parcel, and if a lazy component can be used in the fallback are also covered in this segment.

Brian demonstrates how to reconfigure the Adopt Me application to run on a Node.js server using hydrate and removing all references to window. Server-side rendering speeds up loading time by running React on the Node.js server before serving the request to the user.

Brian walks through how to build a Node.js server using Express.js to statically serve the application after the Parcel build step. Sending back status codes from React Router is also covered in this segment.

Brian answers student questions regarding recommended performance measuring tools, only rendering the home page server side, and what to take into consideration when deciding whether or not to server side render.

Brian demonstrates reconfiguring index.js with renderToNodeStream which will render the React application in pieces. Rendering the application in pieces will allow the user to immediately start downloading the CSS and avoid any flashes in the browser while the app is still rendering.

Brian walks through installing and configuring the Adopt Me application to use TypeScript. TypeScript enables type-checking and adds another layer of protection to help avoid creating bugs.

Brian live codes converting the project's standard JavaScript files into TypeScript and demonstrates why TypeScript throws errors in the current project. TypeScript is defensive and will throw errors on code that is not explicitly typed to create a more stable application and avoid runtime errors.

Brian demonstrates how to fix ESLint with the typescript-eslint package and tooling to better integrate TypeScript and ESLint. The new plugins are added to the .eslintrc.json file and a new parser and resolver are configured.

Brian walks through fixing the Details.tsx file and creating a new file to declare the different types of responses that will be received back from the API call. Explicitly setting the response types allows TypeScript to enforce those types whenever the API is referenced.

Brian demonstrates how to fix the ErrorBoundary and Carousel files by setting the types for each return function and fixing the errors thrown by ESLint. TypeScript requires a return type for each function to enforce stricter rules on what return types are accepted. Student questions regarding the function of the angle brackets around IProps and what is being auto imported are also covered in this segment.

Brian walks through refactoring the Pet component to use TypeScript. What localCache expects as a key, setting the Status type, and ignoring promises returned is also covered in this segment.

Brian live codes the refactoring of the SearchParams, Results, and App components so they follow the TypeScript rules enforced by ESLint. Demonstrations of what a missing property type looks like, how to write an optional property, and editing the package.json scripts are also covered in this segment.

Brian introduces Redux, provides some history on how Redux originated, gives an overview of how the Redux store is organized as properties, and explains how Redux is testable. State management and a walk through of setting up Redux in React is also covered in this segment.

Brian demonstrates how to create a root reducer and a reducer for the animal, location, breed, and theme states. Once given a state and an action a reducer can be created to handle changes in a specific part of the state tree.

Brian live codes action creator functions for the location, breed, animal, and theme reducers. The action creator functions returns an action object with type and payload properties.

Brian demonstrates implementing another hook called useDispatch which dispatches actions to Redux. With the dispatch hook implemented the changed state will be updated and rendered on the DOM. Editing SearchParams.js to accept a null breed value is also covered in this segment.

Brian demonstrates using the Redux Dev Tools to time travel debug, auto-generate tests, modify state, and see actions. A student's question about how the action is dispatched to the useReducer hook in the action is also covered in this segment.

Brian walks through setting up Jest, reconfiguring Babel to work with Node, setting up a testing environment, and creating new testing scripts. Guidelines for writing tests for applications are also covered in this segment.

Brian demonstrates writing and running tests for the Pet component thumbnails, what a failed or passed test looks like, and how to enter interactive test mode. The application must be a Git repository to run interactive test mode.

Brian live codes tests for the application's useBreedList custom hook by implementing a fake component to bypass the issue of custom hooks not being able to be called outside of a component. How to use the react-hooks library to automatically create fake hooks with renderHook and enabling mock fetch requests with Jest are also covered in this segment.

Brian demonstrates how to setup and use snapshot testing in Jest to verify code is correct when the snapshot was taken. Snapshot tests are low confidence, low cost ways of writing tests that also keep track of future changes.

Brian walks through setting up Istanbul to check the test coverage of application files via an interactive viewer. Istanbul also creates an in depth report of the test coverage for what specifically is not being covered by your current tests.

Brian wraps up the course by offering congratulations, takeaways from the course, and sharing social media links.