How can I prevent re-rendering of the page with hooks in React?

Question

i triying to find a solution for this particular problem but i can find it... in new with this, i have this code:

    import React, { Fragment, useState } from 'react'
import '../../media/style/modal.css'


export default function Modal(props) {
  const { activateModal } = props
const[values, setValues]= useState({name:'',email:''})

  if (activateModal) {
    document.getElementById('modals').click()
  }

  function handleValues(){
    setValues({
      name:document.getElementById('name').value,
      email:document.getElementById('email').value
    })
  }

  return (
    <Fragment>

      <button type="button" id="modals" style={{ display: 'none' }} data-toggle="modal" data-target="#exampleModalCenter">
        Launch demo modal
</button>


      <div className="modal fade" id="exampleModalCenter" tabIndex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <form onSubmit={handleSubmit}>
            <div className="container">
              <div className="row">
                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div className="row justify-content-center">
                <h5 className="modal-title" id="modalTitle"><span style={{color:'rgb(197,115,199)'}}>get- </span>started</h5>
              </div>
              <div className="row justify-content-center">
                <input type="text" id="name" name="name"  onChange={handleValues} />
                <input type="email"  id="email" name="email" />
              </div>
              <div className="row justify-content-center">

                <button type="submit" id="btn2">Send</button>

              </div>
            </div>

            </form>





          </div>
        </div>
      </div>

    </Fragment>
  )

}

When i write something in the input, my page re renders... and i dont know how to stop this behavior,any idea?... i try to use useRef but i dont know if im using it right so i dont get the desired effect

Answer 1

I copied your code to a sandbox and fixed it up for you https://codesandbox.io/s/agitated-snow-lls4g?fontsize=14

Just to clarify, useRef will not re-render, even if you mutate it. The updated value will only show when something else triggers a re-render. so useState was the correct usage.

Although I did not change this for you (in order to show that it is possible without it) I would highly recommend putting email and name in their own useState's so that changing the one does not change the other. I would also not get the values from document.getElementById but rather use event.target.value that is passed in from the handleChange, and give a handleChange for each element. If you got multiple elements, use functional programming to create their functions. (eg handleEmailChange = handleChange('email') and then handleChange is a function that returns a function (also known as currying).

To clarify:

• useRef is to keep data between renders(updating does not fire re-rendering)

• useState is to keep data between renders(updating will fire re-rendering)

• each input should probably use its own state to avoid changing values that other components and effects might subscribe to.

• use currying to compute a handleChange for each input