1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. React - Working with External Data

State Hooks Revisited

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyIntermediate
Duration31m
Students94

Description

This module looks at how to work with External Data in React. You’ll be looking at Class Components, Effect Hooks, and how to handle data.  

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • The component lifecycle  
  • Hooks in React  
  • How to create restful services  
  • How to use an Effect Dependency Array  
  • How to hand errors in data requests 
  • How to send data   

Intended Audience

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  

Prerequisites

It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 

Feedback 

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 

Transcript

The state hook allow local state to be added to a function component. Use state as the hook and it takes an argument of the initial state. The function returns an array that asks the current state as the first element, and a function to update the value as the second. We deconstruct this array to declare the state; providing the names of the state and the updating function. It's usual for the updating function to have a prefix of set before the state's name. Remember, state should never be mutated directly, just updated using its updater function. Calling the updater function is the equivalent of calling setstate in a class component. It causes the component to re-render with a new state value. We're allowed to have more than one state hook in a component. These should all be declared immediately inside the component's function's body. State can be any valued JavaScript value, including strings, numbers, arrays, and objects. The code here shows several states declared in a component.

About the Author
Students2874
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics