\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 8.4How to Use the React useEffect Hook
Course Thumbnail of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL.TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
  • MODULE 1
    Introduction
    • LESSON 1.1Build React Apps With GraphQL, MongoDB, and TypeScript
    • LESSON 1.2Syllabus
    • LESSON 1.3How To Go Through The Course
    • LESSON 1.4How to Setup a VS Code React Developer Environment
    • LESSON 1.5Part One Welcome
  • MODULE 2
    Getting Started With Our Server
    • LESSON 2.1Introduction to Module 1
    • LESSON 2.2What is Node? Intro to Node File System with JavaScript fs
    • LESSON 2.3How to Run Node.js With JavaScript Code
    • LESSON 2.4How to Build a Minimal Express.js Server With Node
    • LESSON 2.5How to Use Nodemon to Auto Reload Node.js
    • LESSON 2.6What is TypeScript? TypeScript vs JavaScript for Development
    • LESSON 2.7How to Add TypeScript to a Node.JS Server With ts-node
    • LESSON 2.8How to Compile TypeScript Code With tsc
    • LESSON 2.9Automatically Check TypeScript Code for Errors With ESLint
    • LESSON 2.10Build a Mock Array of Data Objects for TypeScript
    • LESSON 2.11How to Build GET and POST Routes With Express Router
    • LESSON 2.12Summary of Module 1
  • MODULE 3
    Comparing APIs
    • LESSON 3.1Module 2 Introduction
    • LESSON 3.2What is GraphQL?
    • LESSON 3.3GraphQL vs REST APIs - A Comparison With GitHub's APIs
    • LESSON 3.4A Guide to GraphQL Schema and Data Types
  • MODULE 4
    Using Apollo Server
    • LESSON 4.1Module 3 Introduction
    • LESSON 4.2How to Add Apollo Server for a GraphQL API in a Node.js App
    • LESSON 4.3Build a GraphQL Schema And Test it in GraphQL Playground
    • LESSON 4.4How to Query GraphQL Data And Mutate Data
    • LESSON 4.5How to Use GraphQL Schema Language
    • LESSON 4.6Summary of Module 3
  • MODULE 5
    Storing Data
    • LESSON 5.1Module 4 Introduction
    • LESSON 5.2SQL vs NoSQL - An Intro to MongoDB
    • LESSON 5.3How to Create a MongoDB Cluster in MongoDB Atlas
    • LESSON 5.4How to Connect Node.js to a MongoDB Database
    • LESSON 5.5How Add TypeScript Types to a MongoDB Database
    • LESSON 5.6Use Environment Variables With Node.js and MongoDB
    • LESSON 5.7How to Seed Data to a MongoDB Database
    • LESSON 5.8How to Use GraphQL to Query a MongoDB Database
    • LESSON 5.9How to Use lodash merge to Modularize GraphQL Resolvers
    • LESSON 5.10Summary of Module 4
  • MODULE 6
    Getting Started with React
    • LESSON 6.1Introduction to Module 5
    • LESSON 6.2React vs JavaScript - Reusable Components and JSX
    • LESSON 6.3How to Create a React App With Webpack
    • LESSON 6.4An Overview of the create-react-app File and Folder Structure
  • MODULE 7
    Building out Listings
    • LESSON 7.1Module 6 Intro
    • LESSON 7.2How to Build Your First React Function
    • LESSON 7.3How to Define React TypeScript Props
    • LESSON 7.4An Intro to React Functional Components With TypeScript
    • LESSON 7.5Making GraphQL Requests With POST and fetch
    • LESSON 7.6How to Type Data from GraphQL With TypeScript Generics
    • LESSON 7.7How to Delete MongoDB Listing With GraphQL API
    • LESSON 7.8Module 6 Summary
  • MODULE 8
    GraphQL and Hooks
    • LESSON 8.1Module 7 Introduction
    • LESSON 8.2What are React Hooks? An Intro to Reusing Logic in React
    • LESSON 8.3How to Use the React useState Hook
    • LESSON 8.4How to Use the React useEffect Hook
    • LESSON 8.5How to Customize the React useQuery Hook
    • LESSON 8.6How to Manually Refetch React useQuery Hook Data
    • LESSON 8.7Customize GraphQL Errors with React useQuery Hook
    • LESSON 8.8How to Customize the React useMutation Hook
    • LESSON 8.9How to Use React's useReducer Hook to Handle State
    • LESSON 8.10Module 7 Summary
  • MODULE 9
    Introducing React Apollo
    • LESSON 9.1Module 8 Introduction
    • LESSON 9.2Build an Apollo Client With apollo-boost and GraphQL
    • LESSON 9.3How to Replace useQuery and useMutation With Apollo Hooks
    • LESSON 9.4How to Autogenerate GraphQL Types With Apollo CLI
    • LESSON 9.5Module 8 Summary
  • MODULE 10
    Styling with Ant Design
    • LESSON 10.1Introduction Module 9
    • LESSON 10.2An Intro to CSS UI Frameworks With Ant Design
    • LESSON 10.3How to Add Ant Design UI Framework to React
  • MODULE 11
    Part One Conclusion
    • LESSON 11.1Part One Conclusion
Right arrow icon.
Go to Next Lesson
Go to Next Lesson
LESSON 8.6How to Manually Refetch React useQuery Hook Data
  • Go Pro
  • Courses
  • TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
  • How to Customize the React useQuery Hook
  • Go To Previous Lesson
    How to Use the React useEffect Hook
    How to Use the React useEffect Hook

    We've managed to use the useState Hook to track and display listings data to our UI. In this lesson, we'll introduce the useEffect Hook and see how we can create an effect callback to query listings data the moment our component mounts.

  • Go To Next Lesson
    How to Manually Refetch React useQuery Hook Data
    How to Manually Refetch React useQuery Hook Data

    In this lesson, we'll introduce the capability for a component to manually refetch a query from the useQuery Hook.