COMP6080

Web Front-End Programming

ReactJS

Hooks - useContext

Managing State beyond a Component

We've learned how to manage state within a component. However, what happens if we want to manage state between components? We have three key options:

1. Pass props down to subsequent components with "useState"
2. Use ReactJS "useContext" hook
3. Use a state management tool like mobx or redux

 

(3) is too complicated for the scope of this course. So we will discuss (1) and (2)

 

Passing props down

Let's do a demo.

State in Component 1

Component 2

Component 3

useContext hook

There are a large number of complex ways to use the useContext hook. We will demonstrate a very straightforward example through a demo that you can use in your own projects.

 

We will use this guide.