Reach Hooks Beginner to Advanced

Table of Content

📌 Introduction

📌 Need for React Hooks

📌 React Hooks

➡ useState

➡ useEffect

➡ useContext

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and some instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉 Linkedin

Let's Start !

Need for React Hooks

➡ useState

This is one of the most used hooks by developers while working with React. Let's understand the purpose of the hook in React -

React uses a virtual DOM and it doesn't keep a track of all the variables that are declared unlike JavaScript. So, if there is a variable that is declared by the developer which can change based on any some inputs or actions it would re-render the element and make the things reflect back on the user's side. It's important to tell React to keep a track of that variable and that is done by using useState hook.

👉 Structure -

//Functional component
const [state, setState] = useState(initialValue);

setState(newValue);

//Class component
this.state = {
value: initialValue
}

this.state.setState({
value: newValue
});

👉 Example -

//Functional component
function check() {
  const [count, setCount] = useState(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count => count + 1)}>+</button>
    </>
  );
}

//Class component
class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={() => this.setState(
              { count: this.state.count + 1 }
        )}>
          +
        </button>
      </div>
    );
  }
}

➡ useEffect

This is another most used hook in React which most of the React developers use even in small projects. The main purpose of this hook comes into play when you want to use any third-party communication with any API or with Server.

Let's take a peak into an example and understand it in a better way -

👉 Structure -

//Functional component
useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes

  return () => {
            cleanup
        }
}, [dependency]);

👉 Example -

function App() {
  const [list, setList] = useState([]);
  const [conn, setConn] = useState(false);
  const [call, setCall] = useState(false);

  useEffect(() => {
   fetch('http://localhost:3333/list')
    .then(data => data.json())
     .then(items => {
       if(call) {
         setList(items)
       }
     })
 }, [conn])

  return(
    <>
       Get Data 
       <button onClick={() => { 
                 setCall(true); 
                 conn ? setConn(false) : setConn(true);
}}>Click Me</button>
    </>
  )
}

There are two state variables that are used to make the call to this local server. The first one is to toogle which click on the button so that the call can be made. The second state variable is because of the fact that the the dependency of useEffect get's called initially when the initialization of the value is done.

So, we want to cancel that false call , because of which we used this other state variable and made it true on the first click.

🔴 Note : The reason why we haven't discussed about this hook on Class components is because it get's divided into 3 different functions namely componentDidMount, componentDidUpdate, componentWillUnmount.

I know many of you are thinking will this be covering in this blog ? The answer is YES, I will give you a small description of them as well so that this blog doesn't leave any stone unturned and you get the complete knowledge.

• componentDidMount : The function inside this will run after the component has been rendered or mounted in other words so if you want to do any call when the component is rendered then you can use this hook.

• componentDidUpdate : The function inside this will run in case of any update on the component like change in states or props.

• componentWillUnmount : The function inside this will run in case of component unmounting . It's called immediately after the component is destroyed or unmounted and mostly used for cleanup purpose by developers.

➡ useContext

While using React we know that we can send our data between multiple components through Props right ? But think about a data like the theme of the user ! This data is something that needs to be sent to mostly all the components of the Project. Isn't it messy now as we need to send it through props to each and every single one of them .

The solution that developers earlier used apply for these types of states was Redux but in today's date we have useContext with us which is the Context api of React to solve this issue and it's really useful for most developers who don't want to mess their project or product by applying Redux.

So, now as we are clear of it's purpose , let's discuss it's structure and example so that you can use it on your next project -

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀