Module 7 Introduction
Introduction to Module 7.0.
This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL with a single-time purchase.
[00:00 - 00:08] In our last module, we gave our client the ability to make a request to our API . However, we haven't been able to display any information in our UI just yet.
[00:09 - 00:18] In this module, we're going to use React Hooks to display data in our UI as well as handle our GraphQL API request. But what is a React Hook?
[00:19 - 00:30] Well React Hooks are just functions that allow components to hook into React- specific features. In this module, we'll introduce and explain what React Hooks are.
[00:31 - 00:42] Use React's use State Hook to keep track of component state. Use React's use effect hook to help make our GraphQL query when our component first mounts.
[00:43 - 00:59] Create our own custom use query hook that consolidates the functionality to make a query when a component mounts. Trapellate a refetch property from our use query hook to help our components retrigger a query after the component has already been mounted.
[01:00 - 01:11] Retrieve the loading and error status of our query made with the use query hook . Create a use mutation hook that provides a request function to conduct mutations.
[01:12 - 01:22] And finally, use React's use a reducer hook to recognize a different way to handle state and state changes in our custom hooks. (upbeat music)