React Hooks (useContext, useEffect, useState, useRef) Summarized Like Crazy (Short & Concise Article)

Hey React engineers! In this article, I'll explain the 4 most important Hooks you need to know in React. Don't worry, I'll not write a long essay and bore you. If you love simplistic articles that get straight to the point, this is the article you need to understand these Hooks.

[1] useState

The simplest of the 4 Hooks I'm going to explain in this article. useState allows you to have a state variable in functional component. If you're confused, it's just a normal variable which can make a component re-render when the value of the variable is changed (to be exact, in most cases). For example:

import { useState } from "react";

function demo() {
  const [isVisible, setIsVisible] = useState(true);

  return <>{isVisible && <h1>I'm visible</h1>}</>;
}

export default demo;

Use useState in functional component. The argument (initial value) can be anything, such as numbers, boolean values, etc. In this case, true (boolean). Doing this gives us two things in an array, the first is the actual variable itself and then a function to update the value of that variable. In this case, we're destructuring the two values right away which is the convention. Now, it's just a normal variable. To set its value use the dedicated function that we destructured earlier like this:

setIsVisible(false);

That's it. The only special thing to note is that state variables allow you to re-render components upon change of data (in most cases).

[2] useEffect

Used in one of the following two cases. One is to trigger something when the function it is in is rendered. Another is to trigger something when a specific data it is assigned to keep an eye on is changed.
Case 1:

import { useEffect } from "react";

function demo() {
  useEffect(() => {
    console.log("Like my post!");
  }, []);
}

export default demo;

Please take note that the second argument is array of dependencies. In this case useEffect is not keeping an eye on any data, thus it will not get executed (except for the first time this component is rendered). Therefore, we'll only see "Like my post!" in console for the first time.

Case 2:

import { useEffect } from "react";

function demo() {
  const data = [1, 2, 3];

  useEffect(() => {
    console.log("Like my post!");
  }, [data]);
}

export default demo;

In this case, useEffect is keeping an eye on variable called data. Therefore, if you change this data a million times, you'll see "Like my post!" in console a million times.

Edit: credits to Harsh Wardhan from comment section below because he suggested me to add the 3rd case for useEffect, which is the cleanup function. Basically, just before the last right curly brace in useEffect, you can write a "return" keyword followed by function used to do cleaning up. For example, maybe you've got a timer in useEffect that is used to refresh a component, say every 5 minutes. When the component is unmounted, you need to stop that timer, otherwise there's going to be a memory leakage. By the way, the equivalent of this in class component is componentWillUnmount(), which basically means if the component will unmount, clean it up (of course you need to implement the cleaning logic yourself).

[3] useContext

What this Hook means is that you can send a data from a component to all child components. Now, all child components are ELIGIBLE to get that data and if they want to, the child components may choose to consume that data using useContext. Example:

const whateverContext = React.createContext();

<whateverContext.Provider value={whateverValue}>
   <>
     <ChildComponent1 />
     <ChildComponent2 />
     <ChildComponent3 />
   </>
</whateverContext.Provider>

Here, after creating the context, the parent component wraps the child component (make sure to append .Provider to provide data to child component) and passed whateverValue as the value. At this point, all child components are ELIGIBLE to get the data. Let's assume ChildComponent3 wants to consume the data. Here's how it would do that:

const whateverValue = useContext(whateverContext);

That's it. Basically, useContext is an elegant solution instead of prop drilling. Please take note that useContext is NOT a replacement to Redux. The reason will be explained in upcoming post. However, be assured that you can build pretty much any application easily by using useContext.

[4] useRef

Everyone talks about it, no one really uses it. First, let's look at the problem:

<ScrollView onContentSizeChange={() => }>
// ...
</ScrollView>

Now, for whatever reason, we've got a component named ScrollView with incomplete onContentSizeChange() attribute. The challenge is,
inside onContentSizeChange(), we need to reference this ScrollView and invoke a function called scrollToEnd(). How can this component refer itself? I guess useRef would help. Here's the solution:

function abc() {
  const scrollView = useRef();

  return (
    <View>
      <ScrollView
        ref={scrollView}
        horizontal
        onContentSizeChange={() => scrollView.current.scrollToEnd()}
      >
// ...

See, first useRef was called and the output was given a value called scrollView. Then, ScrollView component is connected with the scrollView reference from useRef (ref={scrollView}). Finally, now that we've got a reference to this component and connected it, we can call the function we wanted to inside onContentSizeChange, and that is scrollView.current.scrollToEnd(), where current references the current ScrollView component.

That's it. If you find this informative, please give this article a like as I've spent an hour writing it (had to review my notes).