Which strategy to use when displaying a value on the screen that comes from a useState hook of React and not re render unless under an action?

Question

I have a report generated by three parameters. An user and 2 range date fields.

e.g:

When all fields are filled, the report can be generated by Gerar button.

e.g when generated:

The problem i don't know how to handle happens now. When a value of any field is changed, report renders again. As well the values of Motorista and Período fields of header report, since those values come from the parameters.

Here is my code:

useState hooks of parameters:

const [selectedDriver, setSelectedDriver] = useState({});
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());

useState that indicates when to show report or not:

const [renderPDF, setRenderPDF] = useState(false);

Gerar button:

          <Button
            type="submit"
            color="success"
            onClick={() => {
              setRenderPDF(false);
              handleEventsFromMatrix() //function that call an endpoint that brings data to the report
            }}
          >
            Gerar
          </Button>

handleEventsFromMatrix(), function that call an endpoint that brings data to the report:

async function handleEventsFromMatrix() {
    try {
      //rest of logic

      const response =
        await api.get(`endpoint`);

      if (response.data.generatedEvents.length > 0) {
        setRenderPDF(true);
      }
    } catch (err) {
      console.log(err);
    }
  }

Here is the validation rule to show Informe o motorista e o período para o qual você deseja gerar relatório de diários de bordo message or to bring report with data. renderPDF hook starts as false to bring the message and when request is succefully completed, turn it to true, bringing the report with data.

Message:

{!renderPDF &&
  //rest of logic

  <div>
    <h1>Informe o motorista e o período para o qual você deseja gerar relatório de diários de bordo</h1>
  </div>
}

Show report with data:

{renderPDF &&
  <PDFViewer style={styles.page}>
  
  //rest of logic
}

What am i missing here?

Answer 1

With @Changhoon Lee and @Aidan Hakimian help, i was able to debug my code to handle what was missing.

As used useState hooks, every change in it re rendered the component (actually behavior). To avoid this, i had to use useRef. useRef save last value without re render components!

Answer 2

Can you try it after changing it like this? If not, please provide a sandbox to run the entire code.

      <Button
            type="submit"
            color="success"
            onClick={() => {
              //setRenderPDF(false); remove
              handleEventsFromMatrix() //function that call an endpoint that brings data to the report
            }}
          >
            Gerar
     </Button>

async function handleEventsFromMatrix() {
    try {
      //rest of logic

      const response =
        await api.get(`endpoint`);

        setRenderPDF(response.data.generatedEvents.length > 0);
      
    } catch (err) {
      console.log(err);
    }
  }

{renderPDF ?
  (
  <PDFViewer style={styles.page}>
    //rest of logic
  )
  :
  (
    <div>
    <h1>Informe o motorista e o período para o qual você deseja gerar 
         relatório de diários de bordo</h1>
     </div>
  )
  
  
  
}