React Hooks ⚓: Part 1

What is a HOOK?
A Hook is a special function that lets you “hook into” React feature. These can't be called from a regular JavaScript function, they are called from react function components or a custom made hook (which we are going to learn in the upcoming days)

Types of Hooks
In general, we have two types of Hooks which use very frequent:

1. useState
2. useEffect

UseState
UseState is a Hook that lets you add React state to function components. It enables us to see real-time updates. You can think of an example such as when you take out the cash of an ATM machine, your balance gets updated in real-time (here I am not considering how the bank works in the background).

Declaring a state:

const[balance, setBalance] = useState(I_S);

• It declares a “state variable”.
• I_S is the initial state of our state variable.
• The 1st passed argument is the state variable and the second is the function that updates the value of the state
• Normally, variables “disappear” when the function exits but state variables are preserved by React.
• Where ever we want to render our component, we render it like this

{state_varibel_name}

UseEffect
Now as we have updated our state, that state will show its effect and we need to also take care of it. UseEffect state help to make it possible.

Declaring an Effect function:

useEffect(() => {
   // Any effect which we want to render or
   // is written here
  }, []);

• Placing useEffect inside the component lets us access the react variable
• The first argument i.e. the function is the effect of the hook
• The second argument is an array of states, i.e. all the state on which we want to show the effect, it can be empty too
• In case if there is no second argument like this

useEffect(() => {
    // Your Code......
});

then the effect still also runs at least once, upon opening the page or on each refresh

Example with code
I have created a simple code, which has three state value1, value2, and sum which sums the value1 and value2.

import "./App.css";
import { useState, useEffect } from "react";

const App = () => {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [sum, setSum] = useState();

  useEffect(() => {
    setSum(parseInt(value1) + parseInt(value2));
  }, [value1, value2]);

  const set1 = (e) => {
    setValue1(e.target.value);
  };

  const set2 = (e) => {
    setValue2(e.target.value);
  };
  return (
    <div className="field">
      <input type="number" placeholder="Value 1" onChange={set1} />
      <input type="number" placeholder="Value 2" onChange={set2} />
      <p>Sum = {sum}</p>
    </div>
  );
};

export default App;

Go try yourself
Get GitHub code here