Intro to React Hooks and Context API [Webinar Show Notes]
Tags: react, syncfusion, ui, web
Published: 2023-10-29 13:52:17

---
title: Intro to React Hooks and Context API [Webinar Show Notes]
published: true
date: 2023-10-26 12:03:04 UTC
tags: react, syncfusion, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/react-hooks-and-context-api.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wkz2davtsuhc43qiu72.png
---
This blog provides the show notes for our October 19, 2023, webinar, “Intro to React Hooks and Context API.” The webinar was presented and hosted by Khalid Abuhakmeh, developer advocate at JetBrains, and Chad Church, senior sales engineer at Syncfusion_._ If you missed the webinar or would like to watch it again, the recording is on [our YouTube page](https://youtu.be/ApoinsJHVhY "Intro to React Hooks and Context API [Webinar] on YouTube") or you can watch it here.
{% youtube ApoinsJHVhY %}

## Overview

This webinar covered the basics of React Hooks ( **useState** ) and then demonstrated how to use them with Syncfusion controls. It also covers the difference between prop drilling and the Context API while discussing the pros and cons of each.

## Time stamps

[[00:00](https://www.youtube.com/watch?v=ApoinsJHVhY&t=0s "Introduction")] Introduction

[[00:55](https://www.youtube.com/watch?v=ApoinsJHVhY&t=55s "Overview of React Hooks")] Overview of React Hooks

[[02:00](https://www.youtube.com/watch?v=ApoinsJHVhY&t=120s "What is a Hook?")] What is a Hook?

[[03:10](https://www.youtube.com/watch?v=ApoinsJHVhY&t=190s "Components prior to Hooks")] Components prior to Hooks

[[04:41](https://www.youtube.com/watch?v=ApoinsJHVhY&t=281s "Refactored with Hooks")] Refactored with Hooks

[[06:22](https://www.youtube.com/watch?v=ApoinsJHVhY&t=382s "Problem solving")] Problem solving

[[08:30](https://www.youtube.com/watch?v=ApoinsJHVhY&t=510s "Benefits")] Benefits

[[10:01](https://www.youtube.com/watch?v=ApoinsJHVhY&t=601s "Included Hooks")] Included Hooks

[[11:02](https://www.youtube.com/watch?v=ApoinsJHVhY&t=662s "Rules of Hooks")] Rules of Hooks

[[13:02](https://www.youtube.com/watch?v=ApoinsJHVhY&t=782s "React useState vs. Context API")] React useState vs. Context API

[[13:36](https://www.youtube.com/watch?v=ApoinsJHVhY&t=816s "Demo Start")] Demo Start

[[36:00](https://www.youtube.com/watch?v=ApoinsJHVhY&t=2160s "Closing Notes")] Closing Notes

## Q&A

**Q: I am from the classic ASP world and just starting in React. Is context comparable to Session variables?**

A: The concept is similar.

**Q: Which would be cool for isolated editing?**

A: You can use it for isolated editing. In the sample, you could just put the context provider in each function or in the immediate parent. But that is not the intention. 

**Q: If we’re using the same component in different tree of components, do I understand correctly that context is different in that case? Each tree has its own context?**

A: No. Each function will query its parent going up the tree until it finds a parent with the proper context provider.

**Q: Is there a way we can get a copy of the code?**

A: Yes, I’ve posted it on [this GitHub page](https://github.com/Chad-Syncfusion/ContextAPIWebinar "React Context API GitHub demo").

**Q: Can you have multiple contexts declared in a single component?**

A: Yes.

**Q: So, the suggestion is not to use** useState **for grids and to use** useContext **so that if the UI is rerendered, it doesn’t affect the** useState **?**

A: State and context Hooks are complementary features of React. You can use one or both depending on your particular use case and the problems you’re attempting to solve.

**Q: Is it correct to update the** useState **or pass the new variable to .dataSource?**

A: **useState** is the proper way to post an update.

**Q: Where do you declare the data format for the context?**

A: You don’t really have to set a data type or format. JavaScript is way too flexible in this regard.

## Summary

During this webinar, we covered an introduction to React Hooks. We hope you enjoyed this webinar and please keep an eye out for our future React webinars. 

## Recommended resources (related links)

- [React useState vs. Context API: When to Use Them](https://www.syncfusion.com/blogs/post/react-usestate-vs-context-api.aspx "Blog: React useState vs. Context API: When to Use Them")
- [GitHub demo](https://github.com/Chad-Syncfusion/ContextAPIWebinar "React Context API Webinar GitHub demo")
- [Seamlessly Create an Interactive BPMN Viewer and Editor Using the React Diagram Control](https://www.syncfusion.com/blogs/post/create-a-bpmn-viewer-using-react.aspx "Blog: Seamlessly Create an Interactive BPMN Viewer and Editor Using the React Diagram Control")
- [Implementing React Custom Hooks: A Complete Guide](https://www.syncfusion.com/blogs/post/implementing-react-custom-hooks-a-complete-guide.aspx "Blog: Implementing React Custom Hooks")
- [Understanding React’s useEffect and useState Hooks](https://www.syncfusion.com/blogs/post/understanding-reacts-useeffect-and-usestate-hooks.aspx "Blog: Understanding React’s useEffect and useState Hooks")