Passing Event Handlers to Child Components, Re-rendering of App, useState concept

React

React useState hook is useful to store the current state of variables in the function or component.

Hooks let you use more of React’s features without classes. (from react-docs)

Examine this code, shall we?

import { useState } from "react";
const App = () => {
const [number, setNumber]= useState(4);
  return <div>
   
   {number}
  </div>;
};
export default App;

We have only one argument to useState . Additionally, useState will return two values: the first is the state as it is at the moment, and the second is the function used to update the state value. So we can use this function to update the state value .

import { useState } from "react";
const App = () => {
const [number, setNumber]= useState(4);
  return <div>
   
  <button onClick={()=>setNumber(number+1)}>
{number}
    </button>
  </div>;
};
export default App

If you click on the button, you will see that the number is being increased. So it’s clear that setNumber is used to update the state of a number .

Can we use multiple states?

Yes , we can use multiple states to store multiple values within the components . We have already made an app -101 .

We will learn more about complex state after learning the forms .

Now We will modify this application and will create an application 212.

So agenda of this app.

1- We can divide the number by 2

2- We can multiply by 2

3- And we can set the number by 2

Now please remove the content of App.js and replace with this .

import React from "react";
import { useState } from 'react'
const App = () => {
  const [ counter, setCounter ] = useState(1)
  return (
      <>
    <div>{counter}</div>
    
    <button>Multiply By 2</button>
     <button>Divide By 2</button>
      <button>Set 1</button>
    </>
)
}
export default App

Now you guessed it right , we have to make three eventhandlers .

1- handleMultiplyTwo

2- handleDivideTwo

3- handleSetOne

So , imagine these functions in your mind if you are reading . And write these eventhandlers if you are learning .😊

import React from 'react';
import { useState } from 'react';
const App = () => {
  const [counter, setCounter] = useState(1);
const handleMultiplyTwo = () => {
    setCounter(counter * 2);
  };
  const handleDivideTwo = () => {
    setCounter(counter / 2);
  };
  const handleSetOne = () => {
    setCounter(1);
  };
  return (
    <>
      <div>{counter}</div>
<button onClick={() => handleMultiplyTwo()}>Multiply By 2</button>
<button onClick={() => handleDivideTwo()}>Divide By 2</button>
      <button onClick={() => handleSetOne()}>Set 1</button>
    </>
  );
};
export default App;

App.js

You can use some css to look more attractive . But Now we have to focus more upon functionality.

Now let’s divide this app in multiple components . Like this

1- Header —( Counter )

2- Button — button

Okay we can change like this , look into the code.

import React from 'react';
import { useState } from 'react';
import './style.css';
const Header = (props) => {
  return <h2>{props.counter}</h2>;
};
const Button = (props) => {
  return <button onClick={props.onClick}>{props.text}</button>;
};
const App = () => {
  const [counter, setCounter] = useState(1);
const handleMultiplyTwo = () => setCounter(counter * 2);
const handleDivideTwo = () => setCounter(counter / 2);
  const handleSetOne = () => setCounter(1);
return (
    <>
      <Header counter={counter} />
      <Button onClick={handleMultiplyTwo} text="Multiply By 2" />
      <Button onClick={handleDivideTwo} text="Divide By 2" />
      <Button onClick={handleSetOne} text="Set 1" />
    </>
  );
};
export default App;

Let’s begin the analysis that how our counter value is changing . When any of the button is clicked , setCounter is called . And it will change the state of counter .Now If we have change the state value it will cause the re-rendering of Header and Button Component.

So the conclusion , if we are calling the a function and it’s changing the state .It will cause the re-rendering of the Components.

import React from 'react';
import { useState } from 'react';
import './style.css';
const Header = (props) => {
  console.log("Runheader")
  return <h2>{props.counter}</h2>;
};
const Button = (props) => {
  
  console.log("Runbutton")
  return <button onClick={props.onClick}>{props.text}</button>;
};
const App = () => {
  const [counter, setCounter] = useState(1);
  
  console.log("Run", counter)
const handleMultiplyTwo = () => setCounter(counter * 2);
const handleDivideTwo = () => setCounter(counter / 2);
  const handleSetOne = () => setCounter(1);
return (
    <>
      <Header counter={counter} />
      <Button onClick={handleMultiplyTwo} text="Multiply By 2" />
      <Button onClick={handleDivideTwo} text="Divide By 2" />
      <Button onClick={handleSetOne} text="Set 1" />
    </>
  );
};
export default App;

Now you can analyse with this code , when you click any button . The App component , All button components, Header component will re-render. So when the component will render , all childrens of component will re-render automatically.

We will talk about the preventions from re-rendering in the next readings.