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 or you can watch it here.
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.
[00:00] Introduction
[00:55] Overview of React Hooks
[02:00] What is a Hook?
[03:10] Components prior to Hooks
[04:41] Refactored with Hooks
[06:22] Problem solving
[08:30] Benefits
[10:01] Included Hooks
[11:02] Rules of Hooks
[13:02] React useState vs. Context API
[13:36] Demo Start
[36:00] Closing Notes
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.
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.
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.