[Master Class] Deep Dive into React 18 + Typescript

Compare VanillaJS with React, grasp advanced VanillaJS codes, and learn to build a well-architected ReactJS application to avoid maintenance issues and become a professional ReactJS developer.

Explore scope concepts in JavaScript, showing how global, parent, and child scopes access variables and how closures create scope, while explaining hoisting and block scope of var, let, and const.

Explore var, let, and const hands-on, covering hoisting, function hoisting, scope, block scope, and timing issues with for loops and set timeout, plus function factories.

Explore logical or and and operators in JavaScript, learn short-circuit behavior, how or returns the first truthy value, how and requires all conditions true, and identify truthy and falsy values.

Demonstrate how logical or and logical and evaluate truthy and falsy conditions, using examples like 5, 0, 6, and null.

Explore primitive values like string, number, bigint, boolean, undefined, and symbol, and how copying them leaves originals and copies independent. Contrast objects and arrays, which share memory references.

Explore how primitive values copy by value while reference types copy by reference, using variables like sample and copySample and an object with a name and test property.

Explore how to safely copy objects and arrays in JavaScript by using shallow copies (Object.assign, slice, spread) and deep copies (JSON.parse(JSON.stringify), lodash cloneDeep, jQuery.extend), and understand references in nested structures.

Explore shallow vs deep copy with objects and arrays using object.assign and JSON.stringify/parse, illustrating how references behave and how to avoid unintended mutations in ReactJS.

Explore the spread operator for shallow copying objects and arrays, harness rest parameters to handle an arbitrary number of inputs, and master destructuring to unpack values with defaults.

Engage in hands-on practice with rest parameters, spread operator, and destructuring in React 18 and TypeScript, mastering array and object updates, renaming variables, defaults, and shallow copies.

Explore how class components in React encapsulate data with constructors, public and private variables, static members, and inheritance, and learn to instantiate the class to access its members.

Explore using TypeScript classes with private and public variables, static fields, and constructors, plus inheritance from Shape to Square, including area calculation and private data access.

Explore this object and arrow function behavior, including binding, scope, and creation context, with examples in ReactJS to clarify how this refers to the parent object.

Explore how this behaves in objects and arrow functions by comparing a printer class method and its arrow function, revealing how scope and binding differ in global and class contexts.

Master promises and async/await to manage asynchronous JavaScript, and learn the event loop, callbacks, and key APIs like all, race, allSettled, then, and catch.

Demonstrates promises and async/await with hands-on examples, covering resolve and reject, then and catch, and using promise.all, allSettled, race, and any to manage multiple operations.

Explore modular programming with export and import in JavaScript, including exporting before declarations, export blocks, aliasing, import aliases, and default exports, with practical examples using AboutPage and App.tsx.

Master JavaScript for React, covering scope, hoisting, let/const, block scope, primitive vs reference values, shallow and deep copies, destructuring, classes, arrow functions, and asynchronous patterns with promises and async/await.

Explore how to create React.js components in different ways using Node.js, yarn, and Create React App, and learn how components render in your UI and how to debug them.

Set up a React 18 with TypeScript project in Visual Studio Code using Node.js and yarn via Create React App. Learn TSX/JSX, hot reloading, tests, and structuring the components folder.

Learn to build reusable React components with TypeScript props, render into a React DOM root, use fragments, and handle onClick events with camelCase, while exploring strict mode.

Style a reusable React TypeScript button using inline styles and a CSS class, toggle primary vs default with a type prop, and import CSS for styling.

Master rendering lists in React by using unique keys for each item, avoid index-based keys, and learn how proper keys prevent inputs from swapping when fruits are added.

Explore conditional rendering in React by using a show date boolean prop, if statements, and the double ampersand approach for readable UI.

Explore how to use React Dev Tools to inspect components, props, and state, modify data in real time, and profile render performance for debugging and optimization.

Explore the three component life cycle stages—mount, update, and unmount—and see how props and state trigger re-renders in React 18 using dev tools.

Explore a practical React and TypeScript UI built with a navbar, a home page, a sidebar, and a news feed, showcasing components, props, and divider logic.

Master how to add functionalities to React components with hooks, updating the UI on user interactions and fetching data from APIs, while following rules and creating custom hooks.

Learn the purpose of state in React components and efficiently pass props through nested trees. Subscribe to store data and update the user interface with data hooks during migrations.

Understand how the useState hook creates component-specific state and updates the UI on counter increments, while React batches updates and supports functional updates and TypeScript generics.

Use useState with arrays by immutably updating with the spread operator, not pushing in place, and learn how React.StrictMode double renders to reveal impurities and prevent infinite loops.

Explore controlled and uncontrolled components in a React app, compare default values and value props, and implement useState with onChange to filter a fruit list.

explore use reducer in react to move state update logic into a single reducer function, dispatch actions, and observe renders, initializer function behavior, and strict mode effects on rendering.

Explore advancing useReducer in a React app by adding and removing fruits with dispatch actions. Build a typed reducer and maintain immutability to ensure user interface rerenders on state changes.

Compare useReducer and useState to manage complex state in React 18, showing when to place logic in a reducer and update state via dispatch. It covers debugging and memo considerations.

Explore how to use context and useContext to share a counter across components, update via a provider, and compare context with prop drilling for simpler data flow.

Create a central state store with useReducer and useContext to share a counter across nested components, using a provider to pass counter and dispatch for increment and decrement.

Learn how to subscribe to an external store with useSyncExternalStore, using a subscribe function and get snapshot to trigger rerender when external data changes.

Explore building my book app in React 18 with TypeScript, using useState and context to manage theme, pages, and posts, with persistent state across pages and an add post feature.

Explore how React 18's out-of-the-box batching improves performance by grouping state updates across events, promises, and timeouts, reducing renders even with context updates.

Explore refs in React to store a value that doesn't reinitialize in every component, update or rerender, and reference a DOM element to trigger events like click or focus.

Explore how the useRef hook persists data across renders, unlike normal variables, and see it in a counter and a stopwatch that rely on timer.current and setInterval.

Discover how to manipulate the DOM with refs in React and TypeScript using the useRef hook to focus, read, and write input values, comparing vanilla JS and explaining uncontrolled components.

Learn callback refs in React 18 with Typescript to attach a ref to an input, auto focus on render, and understand null-first updates across re-renders.

Learn to forward refs to a component with React.forwardRef and TypeScript, enabling focus and access to inner elements like inputs. Compare forward ref with custom ref props and best practices.

Explore how the use imperative handle hook creates a custom ref via forward ref, exposing scroll to bottom and other methods, with dependencies controlling recalculation.

Learn how a login form toggles to a survey form, using forwardRef with input and button components to manage credentials and questions and answers, with scrolling to the next question.

Discover how react use effects synchronize a component with external systems by running code after rendering to manage side effects, and learn when and how to use them.

Master useEffect in React 18 by handling side effects, focusing an input on load with refs, cleaning up events, and fetching users with a dependency-driven API call.

Compare useLayoutEffect and useEffect in React 18, showing how layout effects run before painting to prevent UI flicker when updating dimensions, and when to prefer useEffect for non-blocking updates.

Explore the useInsertionEffect hook, a pre-DOM-mutation variant of useEffect for runtime style injection in css-in-js libraries, with cleanup and performance caveats.

Learn how the browser builds the render tree, runs layout and reflows, then paints, and how useEffect, useLayoutEffect, and useInsertionEffect impact this process.

Explore best practices for using React 18 effects, emphasizing when not to use them, how to batch state updates, and leveraging props, state, and keys to manage component behavior efficiently.

Master class teaches a login flow with validation and loading states, fetching and displaying user details from a fake application programming interface, and navigating between users with next and previous.

Discover how to optimize React components using built in features, weighing the overhead and necessity to avoid harming performance, and learn when optimizations deliver huge benefits for large applications.

Learn how to use React memo for component memoization, prevent unnecessary rerenders by checking props, and implement a custom comparison for deep prop changes to boost performance.

Learn how useMemo caches expensive calculations to improve performance through memoization, control dependencies, and prevent unnecessary renders, including memoizing objects and using React.memo with useEffect.

Learn how useCallback caches a function between renders, compare it with useMemo, manage dependencies and props for memoized components, and optimize child renders with React.memo.

Learn how React 18 handles heavy updates with transitions, using the transitions hook or standalone state transition to keep the UI responsive and non-blocking.

Use the use deferred value hook to lag search text behind input and render in the background. Memoize expensive components and show a loading indicator to signal progress.

Discover how React renders components through the render and commit phases, including initial renders, state updates, fibers, reconciliation, and the virtual DOM with double buffering.

Explore React fiber, the core reconciler architecture that prioritizes updates and commits to the DOM. Discover how the fiber tree and work-in-progress trees enable concurrent rendering and interruption guarantees.

Master React 18 lazy loading with suspense by deferring component code until render, using dynamic import and a suspense fallback to show a loading indicator.

Explore how suspense in React 18 delays rendering until asynchronous resources load, using a thrown promise and a fallback loading state.

Use the profiler in react dev tools to measure render duration and commits, identify slow components, and optimize performance with flame graph, rank, and timeline insights.

Explore the profiler component in React, compare it with the React DevTools profiler, and learn to parse data programmatically and create charts using actual duration, base duration, commit time.

Explore more hooks that React provides and create your own custom hook. Feel excited as you build a custom hook and continue to the next lecture.

This lecture explains how the useId hook generates unique aria described by IDs for accessibility attributes, ensuring distinct IDs across inputs and compatibility with server side rendering.

Create a custom hook by combining built-in React hooks to detect clicks outside a component, using a boundary ref and a callback to log outside clicks.

Use the useDebugValue hook to label a custom hook in React DevTools, displaying online status from your useOnline hook with an optional formatter.

Learn to build a hovering custom hook using use state and use effect, with a container ref and pointer enter and pointer leave events to return true when hovering.