React: Hooks, Concurrency, Performance, Maintainability & Tests

Are you an experienced React developer and curious to deeply dive into  advanced topics and the changes of 2019? This course is based around the following areas: Code reuse, Performance, Correctness, Refactoring and Function Components getting the same capabilities as Class Components. React is introducing new functionality to address challenges that come with  above areas. This course shows you what you can do to make your React program  easier to build, smaller, faster and correct. Some of the changes will be released during 2019, but that doesn’t mean we  cannot explore the changes and write demos. The course will be a combination of many demos, presentations and hands-on  labs.

What you will learn:

  • Patterns
  • New Context API (React 16.3)
  • Hooks (~Q1 2019)
  • Profiler (React 16.5)
  • Performance
  • Concurrent Mode (~Q2 2019)
  • Suspense (React 16.6 and ~Q3 2019)
  • Considerations for maintainable projects 
  • Jest
  • Storybook

Audience:

This course is intended for experienced React developers interested in patterns, performance and new/future topics like Hooks and Concurrent React.

Participants are expected to have at least a year of React hands on experience. Basics like class and functional components, properties, events, state, lifecycle methods and Redux should be familiar.

Content:

Patterns: 

  • Container pattern
  • Props and state destructuring in render method
  • Higher-Order Components
  • Render-props
  • Transclusion
  • Implicit State pattern (see: Context) 

New Context API (React 16.3):

  • Provider
  • Consumer 

Using Hooks (~Q1 2019):

  • Function components with state: useState() & useReducer()
  • Function components with side effects: useEffect()
  • Function components with context: useContext()
  • Other React Hooks
  • Refactoring Class components

Writing Hooks (~Q1 2019):

  • Writing Custom Hooks 

Profiler (React 16.5)

  • DevTools changes
  • How to use
  • Profiler API 

Performance:

  • MemoCompontent
  • memo()
  • useCallback() Hook
  • useMemo() Hook
  • react-virtualized

Concurrent Mode (~Q2 2019):

  • Preparations: Strict Mode (16.6)
  • Responsive rendering without blocking the main thread
  • Working with priorities 

Suspense (React 16.6 and ~Q3 2019):

  • Preparations: Strict Mode (16.6)
  • Suspense component & lazy() (16.6) 
  • Code splitting (16.6)
  • Time slicing
  • Data fetching

Considerations for maintainable projects:

  • Naming
  • Code & folder organisation
  • more? 

Jest:

  • Unit tests
  • Testing asynchronous code
  • Setup & Teardown
  • Mocks
  • Snapshot testing
  • Integration tests
  • Test React Applications 

Storybook:

  • Writing stories
  • Using popular addons: Actions, Console, etc.
  • Manual testing 

Appendix:

  • Using Redux and React with Hooks
  • redux-react-hooks 

Rick Beerendonk - instructor of the course

Rick is a senior consultant and trainer from The Netherlands.
He has over 25 years of professional experience while working in small, large and fast growing organisations.
His passion is simplicity, wellwritten code and team dynamics.
He is specialised in front-end technologies and speaks regularly about these topics at international events.

Other relevant courses

28. April
3 days
Classroom Virtual
26. February
3 days
Classroom Virtual
4 days
Classroom