React Advanced

This advanced React course is designed for developers who want to take their React skills to the next level. You’ll dive deep into modern tools and techniques like GraphQL, the Apollo platform, and React Query for efficient data handling. Master React Hooks, including the latest from React 18 and 19, to optimize your components and enhance performance. We’ll also cover memoization with useMemo and useCallback, explore Redux and Redux Toolkit for state management, and understand how to interact with the server with RTK Query.

In addition, you’ll gain hands-on experience with testing strategies—ranging from unit and integration testing with React Testing Library to end-to-end testing with Cypress. You’ll explore server-side rendering with Next.js, tackle complex forms with react-hook-form, and improve app performance with code splitting and lazy loading. This course equips you with the skills and insights to build highly scalable and maintainable React applications, keeping up with the latest industry trends.

Each topic is complemented by hands-on project examples that thoroughly cover all the themes and subtopics. These projects are provided to participants as practical demonstrations of the technologies in action and can serve as a foundation or starting point for implementing these technologies in their own work.

• To introduce students to advanced React topics, giving usage examples.

Work with GraphQL [8h] [homework 4h]

• Core concepts. SDL

• Queries. Directives

• Resolvers

• Apollo platform

• Apollo studio

• Apollo client

• State management

• Subscriptions

React hooks [6h] [homework 2h]

• Component Lifecycle with hooks

• useState and its correct usage

• useEffect with debouncing

• Memoization with useMemo, useCallback and useRef

• Common mistakes in using useCallback and useMemo

• useImperativeHandle hook

• useLayoutEffect hook

• React 18 hooks: useInsertionEffect, useDeferredValue, useTransition, useSyncExternalStore

• React Compiler in React 19

• Actions in React 19

• React 19 hooks

• Custom hooks in popular libraries

React Portal. React Context [2h] [homework 2h]

React Query [2h] [homework 1h]

• Redux [3h]

• Redux recap

• Redux DevTools

• Redux Frequently Asked Questions & Best Practices

• Redux Middleware: how it works

• Thunk Middleware

• Creating your own middleware

Redux Toolkit [3h] [homework 1h]

• RTK

• Best Practices with RTK

• Reselect in RTK

• RTK Query

Testing React components [3h] [homework 1h]

• Snapshot testing

• React-testing-library

• Testing Conditional Rendering

• Testing Edge Cases

• Async utils

Mock and integration testing [3h] [homework 1h]

• Mock Testing

• Mocking API Requests with MSW

• Unit Testing a Redux Component

• Integration Testing a Redux Component with reducers

• Testing Reducers in Redux

• Testing RTK Query with MSW

E2E testing with Cypress [2h] [homework 1h]

• Cypress Folder Structure

• Mocking API Responses

• Error Handling in E2E Tests

• Configuring Cypress with Vite

• Best Practices for E2E Testing

• Performance Considerations

• Measuring time to identify slow tests

Forms [1h] [homework 1h]

• Basic ways to work with forms in React

• React-hook-form

Code splitting / Lazy loading [1h] [homework 1h]

Server-Side Rendering with NextJS [2h] [homework 1h]

Total: theory 36h (100%), practice-homework +20h (+56%)