useRef: como funciona esse React Hook | #AluraMais

Alura

7 Nov 202210:00

Summary

TLDRIn this video, Vinícius Neves walks through the use of the `useRef` hook in React to manipulate DOM elements directly. He demonstrates creating a form with input fields and buttons, setting references for elements like labels and inputs, and dynamically updating their properties, such as changing text and styles. Additionally, Vinícius covers how to handle form submissions and automatically focus on the input field. The video ends with a coding challenge, encouraging viewers to apply these concepts in a real-world project. It's a practical tutorial for frontend or full-stack developers exploring React's capabilities.

Takeaways

😀 The video introduces the 'useRef' hook in React and explains how to use it effectively in applications.
💻 The instructor starts with a new React application and demonstrates how to create a simple form with input and button elements.
📝 The 'useRef' hook is used to store references to DOM elements, which can then be manipulated.
🔄 The instructor shows how to manipulate the 'innerHTML' of a label using the reference stored by 'useRef', changing the label text to uppercase.
🎨 DOM styling is also demonstrated by dynamically applying italic styling to the label via the 'useRef' hook.
📧 An example is provided of how to create a second input field for 'email' without using references, to contrast with the earlier example.
🚀 A practical use case is demonstrated where focus is returned to the input field for 'name' after the form is submitted.
🎯 The instructor highlights that 'useRef' can be used to manipulate DOM elements directly, like in vanilla JavaScript, making it versatile for various tasks.
🛠 A challenge is given to the viewer to manipulate the focus of input fields upon form submission, reinforcing the concepts taught.
📚 The video is part of a broader React course, with links provided for further learning on frontend technologies like HTML, CSS, JavaScript, and React.

Q & A

What is the main topic of the video?
-The video is about using the 'useRef' hook in React to manipulate DOM elements directly.
What does the presenter aim to teach in the video?
-The presenter aims to demonstrate how to use the 'useRef' hook in React to store references to DOM elements and manipulate them, such as changing their content and styles.
What initial setup is done in the application?
-The presenter creates a simple form with a label, an input field, and a save button in a newly created React application.
How does 'useRef' help in React?
-'useRef' allows developers to directly interact with DOM elements by storing references to them. This is useful for accessing or modifying elements without causing re-renders.
What does the presenter do with the label using 'useRef'?
-The presenter modifies the label's content using 'useRef' by setting its innerHTML to 'Nome do usuário' in uppercase.
How does the presenter style the label using 'useRef'?
-The presenter changes the label's font style to italic using 'useRef' by modifying its 'style.fontStyle' property.
What is the purpose of 'useEffect' in the example?
-'useEffect' is used to manipulate the DOM after the component has mounted, allowing the presenter to access and modify DOM elements using the references stored by 'useRef'.
How does the form submission work in the example?
-The form has a submit handler that prevents the default action using 'event.preventDefault()' and then shifts the focus back to the name input field using 'inputRef.current.focus()'.
What is the challenge presented to the viewers?
-The challenge is to create functionality where, after submitting a form, the focus is set back to the name input field using 'useRef'.
What is the overall goal of the video?
-The goal of the video is to demonstrate practical use of 'useRef' in manipulating DOM elements within React applications, enhancing the viewer's understanding of this important React hook.

Outlines

00:00

👨‍💻 Introduction to UseRef Hook and Setup

In this video, Vinícius Neves introduces the topic of the `UseRef` Hook in React and its application in a new project. He begins by setting up a form with a label, an input field, and a button. He explains the purpose of referencing elements in the DOM using `UseRef` to manipulate form elements such as labels and inputs. The initial setup of the application includes creating references for both the label and input elements, and Vinícius demonstrates this by updating the label’s HTML content and styling it with `fontStyle: italic`.

05:01

✉️ Adding Email Field and Handling Form Submissions

In this section, Vinícius expands the form by adding an email field. He explains how to remove references for certain elements and updates the label from 'Name' to 'Email'. Vinícius demonstrates how to handle form submissions in React using the `onSubmit` event handler, capturing the submission event, preventing the default behavior, and processing form data. He then shows how to refocus the input field for easier multiple submissions, demonstrating the real-time manipulation of the DOM using React.

Mindmap

Keywords

💡useRef

The useRef hook is a fundamental concept in React used for accessing and interacting with DOM elements directly. In the video, the presenter demonstrates how to use useRef to store references to form elements like 'Label' and 'Input'. This hook allows manipulation of elements outside of React's normal rendering flow, such as setting focus or changing styles, as seen when the label text is modified to 'Nome do Usuário' in uppercase.

💡React

React is a JavaScript library for building user interfaces, and it is the primary framework discussed in the video. The presenter uses React to create a dynamic form, explaining concepts such as hooks and event handling to enhance interaction with the DOM. The focus is on demonstrating how React components can control the form and update elements in real-time.

💡DOM manipulation

DOM manipulation refers to the direct interaction with the Document Object Model to alter elements on a web page. In the video, the presenter illustrates DOM manipulation using useRef, showing how to dynamically update label text and apply styles such as italics. The ability to manipulate the DOM is essential for creating dynamic and interactive web applications.

💡Event handling

Event handling in React involves capturing and responding to user actions such as clicks or form submissions. In the video, the 'onSubmit' event is used to trigger a function that processes form data. After submission, the presenter demonstrates how to reset the form and refocus the input element, improving user experience by facilitating continuous form interactions.

💡useEffect

useEffect is another important React hook that allows you to perform side effects in functional components, such as data fetching or DOM updates after rendering. In the video, useEffect is utilized to update the DOM once the component is mounted, as seen when the label text is changed to 'Nome do Usuário'. This hook plays a key role in controlling when and how the application updates its interface.

💡Form submission

Form submission refers to the process of sending user input data from a form to a server or handling it within the client-side application. The presenter explains how to capture form data and handle submission in React by preventing default behavior (e.preventDefault()) and resetting the form after submission. This is demonstrated in the 'enviarFormulario' function, which processes the form and refocuses the input field.

💡State management

State management in React involves tracking and updating the state of components to reflect changes in the UI. Although not directly explained in the video, it is implicit in the presenter’s use of hooks like useRef and useEffect, which manage component behavior without directly altering the state, allowing smooth control of form inputs and dynamic updates to the interface.

💡Focus management

Focus management involves setting the focus on specific elements within a web application to improve user navigation. In the video, the presenter shows how to use the inputRef.focus() method to set the focus back to the input field after form submission, ensuring the user can immediately begin typing again. This is a key example of enhancing user experience through DOM manipulation.

💡HTML attributes

HTML attributes are used to provide additional information about HTML elements. In the video, attributes like 'type' and 'ref' are discussed, with the presenter demonstrating how to use them in React components. For example, the 'type' attribute in the input field is used to specify that it is for an email, while 'ref' is used to bind the input to a useRef hook for DOM manipulation.

💡Component lifecycle

The component lifecycle in React refers to the stages a component goes through from its creation to its removal. In the video, useEffect is tied to the component lifecycle, allowing the presenter to make DOM updates after the component is rendered. This highlights how React hooks like useEffect help developers manage component updates and interactions efficiently.

Highlights

Introduction to useRef: The video explains the purpose of the useRef hook in React, emphasizing its ability to directly manipulate the DOM.

Creating a basic form: The tutorial starts by building a simple form with a name input and a 'Save' button to demonstrate how useRef can be used.

Implementing useRef for label and input: The host shows how to create references for form elements (like label and input) and store them using the useRef hook.

DOM manipulation: Through useRef, the video demonstrates changing the inner HTML of a label element to 'USERNAME' in uppercase as a way to showcase direct DOM manipulation.

Styling with useRef: The host alters the font style of the label to italic using the reference, showcasing how styles can be modified directly on the DOM.

Adding a new field: A new email input is added, showing how form components can be extended with additional inputs and without references.

Handling form submission: The video explains how to capture form submissions and trigger specific actions using a custom `handleSubmit` function.

Setting focus programmatically: By using useRef, the video demonstrates how to automatically set the focus back to the name input after form submission.

Practical application: The video highlights scenarios where useRef can be useful, such as capturing user input for forms, focusing elements, and manipulating styles.

Best practices for useRef: Suggestions are given for when to use useRef versus other hooks like useState or useEffect for state management.

Debugging common issues: The host addresses a common mistake in fontStyle property naming, illustrating how to troubleshoot minor syntax errors.

React hook lifecycle: A quick overview of how useEffect interacts with useRef is provided, showing how changes are applied after component render.

Challenge to the viewer: The video proposes a hands-on challenge for viewers to modify the existing form and manipulate the focus using useRef.

Extending projects: Suggestions are made for integrating the useRef hook into larger React projects and enhancing form handling capabilities.

Final thoughts: The host wraps up with a discussion on the versatility of useRef and its relevance in advanced React development, encouraging developers to explore its potential.