Hooking up with useState and useEffect

I am back in popular demand with a second blog; having Vietnam flashbacks; about the usage of useState then we'll jump to useEffect once your boi has butchered useState.

useState hook

When do you use useState? Lets say you want to change the content in a variable when an event occurs, like clicking a button. With the basic understanding of programming that thing seems too simple.

Just update the variable via a function attached to the button and it will be updated in the DOM every time its clicked.

No. Why, you ask? And if you are not lets be real, what are you reading this for? Because I gave you a link hmph?

For that lets have a look at this piece of code:

const App = () => {
  let name = 'mario';

  const handleClick = () => {
    name = 'luigi';
    console.log('name', name);
  }

  return(
    <div>
      <h2>Homepage</h2>
      <p>{name}</p>
      <button onClick={handleClick}>Touch me</button>
    </div>
  );
}
export default App;

Now this wont re-render the {name} element in the react DOM, because it isn't reactive! ba dum tss! Well, this means when the value inside name is changed react won't re-render the template because its not watching it. What do I mean by watching? I can't answer everything in technical terms; I'm fresh in it; remember my previous blog right?

Here useState comes in to picture.

We will make react watch that damn variable so that it re-renders it every time it changes. To achieve this feat we use something called Hook which is a special kinda function, you can easily spot one, it has the prefix use attached to the name. I'm telling you the developer had something nasty going on in his mind.

The useState hook provides us with the ability to make a value reactive and also change it to our convenience.

import {useState} from 'react';

const App = () => {
  const [name, setName] = useState('mario')

  const handleClick = () => {
    setName('luigi');
  }

  return(
    <div>
      <h2>Homepage</h2>
      <p>{name}</p>
      <button onClick={handleClick}>Touch me</button>
    </div>
  );
}
export default App;

First thing we need to know is, useState returns two values i.e the initial value we give to the hook and a function for being able to alter the value of the variable in concern; here name. So we store the values returned, in an array. Array destructuring is being used here. Now, name has 'mario' and setName is a function for altering name.

That being explained one can easily see what is going in the code above.

useEffect hook

Now lets say you want to execute a piece of code every time there is a change in value of the concerned variable. Normally you would need to know about lifecycle methods and more difficult stuffs like these which even I; at this current moment; am having a trouble to grasp, so welcome your hearts to useEffect which makes complex stuffs easy for you; by now you should get the idea that "stuff" is used by me whenever I have a meager idea of a topic. Let us have a look at the piece of code:

import {useState, useEffect} from 'react';

const App = () => {
  const [name, setName] = useState('mario')

  const handleClick = () => {
    setName('luigi');
  }

  useEffect(() => {
    console.log("useEffect ran")

  },)

  return(
    <div>
      <h2>Homepage</h2>
      <p>{name}</p>
      <button onClick={handleClick}>Touch me</button>
    </div>
  );
}
export default App;

Here, the code inside the useEffect will run every time react DOM is rendered. There is a safer and more specific approach to useEffect.

  useEffect(() => {
    console.log("useEffect ran")

  },[name])

If we want useEffect to get triggered by the change in a specific value, we can pass that variable as dependency to it. Since [] these brackets are used we know that the dependencies can be more than one. This basically says "only run this effect if the name state changes." This way we can change the value and not cause our effect to run infinitely, well in case your component does a more complex job unlike the examples I am using.

I hope reading this blog was able transcend you into an advanced race of species, if it failed maybe you are already a special one.

I congratulate you on being able to completely read this blog and survive this abomination.

If you just scrolled your way down expecting a TLDR; sir you just missed an amazing piece of literature.