Tutorials on React Hooks 101

We have a special React Hooks tutorial on how to create your own custom hooks. This is the 6th and final tutorial on React Hooks, so don't miss it. You will learn how to create custom hooks, which liberates you to implement just about any functionality you might want using React Hooks. You can revisit the full series in case you missed any of the tutorials: If you're ready to take your React development skills to the next level, then we encourage you to look into the full course: The newline Guide to Modernizing an Enterprise React App . This course is taught by Blues Wireless developer, Paige Niedringhaus, who has in-depth experience working with React on large products, and teaching others how to make full use of React's modern features. The course covers: The skills you learn in the course are essential for the needs of many large tech organizations that are actively using React for both client-facing products and internal projects. Get it here . You can also catch Paige live on the React Round Up podcast , where she goes into all things React development.

We've now arrived at Day 5 of our special 6-part YouTube tutorial series on React Hooks . Hooks are so important for all React developers to understand because, conceptually, React components have always been closer to functions and the library supports a functional way of thinking. Hooks add powerful capabilities to functional components. Now in Tutorial 5, Paige covers a powerful Hook - the useContext Hook: The use of component hierarchies solved problems in React around composing UI out of smaller individual parts, but created a range of new problems: More importantly, passing props down became unwieldy in complex component hierarchies where the intermediate components did not need props that were intended for a component further down the hierarchy. These problems are neatly solved for us using the Context API in React, and the useContext Hook lets you share state easily in component hierarchies without passing props down. Learn all about the useContext Hook and how to use it in today's React Hooks tutorial. Keep an eye out for the 6th and final tutorial in our React Hooks series. In it, we'll go in-depth into Custom Hooks and how to write your own. Mastering this skill will turn you into a much more versatile React dev.

We are continuing the tutorial series on React Hooks . Join Paige in today's tutorial as she teaches you all about the useRef hook, how it works, and how to use it in your own React apps. React refs help you imperatively modify the DOM outside the normal flow of component rendering. Here are some example scenarios: Since refs have often been thought of as an escape hatch that indicates that state should be managed elsewhere in the component hierarchy, there are a lot of questions about how to use them correctly. In this detailed but beginner-friendly guide, Paige goes over the nuances of using refs and the useRef React Hook properly so that you can confidently manage DOM elements directly in React. Get started with the useRef hook tutorial here. Up next in our tutorial series, Paige has more on how to use React's built-in Hooks, and how to create your own.