React forms and useRef Hook

So, in the last article we got to know about useState and useEffect hooks of react. Let's dive a little deeper this time with learning what are Forms and does useRef hook really work. I have also thrown in a bonus of what is prop drilling.

TOC

1. Forms
2. UseRef Hook

Forms

Now, if you have learnt JavaScript chances are you already know what forms are and how to use them. But if you have jumped staight into React with just the basics of JavaScript then this will help you learn a new concept.
So, basically forms are as the name suggests a form, often seen in hardcopies as well in official settings. We have textarea, check boxes in traditional forms. In the web format the possibility increases with buttons, radio buttons, dropdowns, and many more.
The forms are submitted using onClick or onSubmit events. When we do interact with the button then the form by default displays the output immediately and re-renders the component. So to prevent that from happening we need to use
e.preventDefault in the form handler. Here, 'e' is the event.

function handleClick(e){
    e.preventDefault()
    //rest of the code
}

onClick event can be used with button tags and onSubmit with the form tag itself.

Tip:
If the keyname and the variable storing the data have same name, in ES6 we can just write once while passing the object. Ex-

const person= {firstName: firstName, email: email}
//is same as 
const person = {firstName, email}

Forms by default keep some internal state unlike other DOM Elements and thus the concept of controlled input or components comes in.
Controlled inputs or components are used for the submission of a form and they have access to the data user has entered as well. We can use these to pass the value of inputes to other UI elements or reset it from other event handlers.
When we have to handle multiple inputs, a name attribute can be assigned and the handler functikn can work accordingly.
Although, multiple inputs can be used everytime, it's not a good practice. We should group the inputs that can be handled by one function. Ex- Taking inputs of name, email, and age, then displaying on the screen.

That's the basics of form. Use these tips to write code more efficiently!

useRef Hook

From forms we know the concept of controlled inputs. But we can also use uncontrolled inputs and components in our app. And thus useRef hook comes in a clutch.

The hook preserves the value in between renders like useState. However it does not trigger a re-render like useState.

The most popular use of this hoon is to target DOM nodes and elements. Something similar to what querySelector does in JavaScript.

The hook has to be assigned to some container

const refContainer = useRef(initial value)

We need to pass the container along with a keyword 'ref'.

The container is an object with a property of 'current' so we can use it to get the exact DOM element.

One more thing to keep in mind is that useRef is not restricted to any one HTML element.
An example of useRef is given below.

const refContainer = useRef(null)
const divContainer = useRef(null)
const handleSubmit = (e) => {
 console.log(refContainer.current.value)
 console.log(divContainer.current)
}
const Example = () => {
return (
  <>
    <form onSubmit= {handleSubmit}>
      <div>
         <input type="text" ref={refContainer} />
      </div>
      <div ref={divContainer}> useRef is Awesome!</div>
    </form>
  </>
)
}
export default Example;

That's the end of React Basics Part 3. Check out other articles in this series.
I’ll keep adding more of these. Do let me know your thoughts and follow my Twitter and LinkedIn.