😜 My Looks on ⚓ Hooks
Tags: react, javascript, frontend
Published: 2019-03-30 05:02:25

---
title: 😜 My Looks on ⚓ Hooks
published: true
description: This is basically a walkthrough for different hooks in React
tags: reactjs,javascript,frontend
---

>An article on what i love the most after a long time.
>You don't need Class to maintain state hereafter

### Functional Stateful Component 🎡
*Is that even a word ?*

So here we had a traditional way of creating stateful component like `Class App extends` blah blah blah...

But that's not it here we have functional stateful component like the one below. 

``` javascript
import React, { useState } from 'react'; //Importing modules

function App() {

  const [date, updateDate] = React.useState(Date());

  return (
    <div className="App">
      <h1>{date}</h1>
      <button onClick={() => {
        updateDate(Date())
      }}> Update </button>
    </div>
  );
}
```

Cool uh... 😁

## useEffect

That's not it... We have even more cool stuff in the closet. Now that we know how to maintain state in a functional component. So how de we react if there are some effects in the component... 🤔  Really just `useEffect` 😜.

*Let's handle effective changes.*

``` javascript
import React, { useState, useEffect } from 'react'; //Importing modules

function App() {

  let count_p = React.createRef();

  const [date, updateDate] = React.useState(Date());

  React.useEffect(() => {
    count_p.current.textContent = Number(count_p.current.textContent)+1;
  });

  return (
    <div className="App">
      <h1>{date}</h1>
      <button
        onClick={() => {
          updateDate(Date());
        }}
      >
        {" "}
        Update{" "}
      </button>
      <p>You've updated dated <span ref={count_p} ></span> time(s)</p>
    </div>
  );
}
```
So everytime you update state the method `useEffect` is called. There we go.
We're using Ref's here is there a better way? 🙄 

## useRef
*There's an another hook we can use from the above example. `useRef`. Let's use that.*

``` javascript
import React, { useState, useEffect, useRef } from 'react'; //Importing modules

function App() {

  let count_p = useRef(null);

  const [date, updateDate] = React.useState(Date());
  
  useEffect(() => {
    count_p.current.textContent = Number(count_p.current.textContent)+1;
  });

  return (
    <div className="App">
      <h1>{date}</h1>
      <button
        onClick={() => {
          updateDate(Date());
        }}
      >
        Update
      </button>
      <p>You've updated dated <span ref={count_p} ></span> time(s)</p>
    </div>
  );
}
```
## useContext

So the context which was released has become legacy context. Now there's a new way of writing it.
So let's say i have a context called Ration Context. In this i list i add new ration every year. Once i do that i wanted that to be listed in all ration shops. So we use something called **Context**. Let's see how it works.
```jsx
// RationContext.js
import React,{ Component, createContext } from 'react';

// Create a context which gives Provider and Consumer
const RationContext = React.createContext({
	//Add initial values
	ration: [],
	addRation: () => null
});

//export the consumer
export RationConsumer = RationContext.Consumer;

//export the provider with state and other methods
export class RationProvider extends Component {

	constructor(props){
		super(props);
		this.addRation = this.addRation.bind(this);
		this.state = { ration: [] }
	}

	addRation = (ration) => {
		let { ration } = this.state;
		ration.push(ration);
		this.setState({ ration });
	}

	render(){
		let { ration } = this.state;
		let { children } = this.props;
		
		return(
			<RationContext.Provider value={{ ration, addRation }} >
				{children}
			</RationContext.Provider>
		)
	}
}
```
So we have to list somewhere the rations which is provided. Lets see how to do this using hooks.
For this we need to change a line in `RationContext.js`
```jsx
	const RationContext to export const RationContext
```
Now let's list Rations in RationList.js
```jsx
	import React,{ useContext } from 'react';
	import { RationContext } from './RationContext';
	
	export const RationList = () => {
		let { rations } = useContext(RationContext);
		
		return(
			<div>
				<ul>
					{rations.map(ration => <li>{ration}</li>)}
				</ul>
			</div>
		)
	}
```

Cool. Now let's add ration from AddRation.js
```jsx
	import React,{ useContext, useState } from 'react';
	import { RationContext } from './RationContext';
	
	export const AddRation = () => {
		let { addRation } = useContext(RationContext);
		
		updateRation = (e) => { e.keyCode === 13 ? addRation(e.value) : '' }
		
		return(
			<div>
				<input type="text" placeholder="Ration name" onKeyDown={updateRation}/>
			</div>
		)
	}
```

Context is no magic it sits on top of the DOM Tree 🕵🏼‍♂️ and Has its People( Consumer ) down the tree working for it . Here we consider *App.js* is the entry point of App.  Now let's have App.js.
```jsx
// App.js
import React from 'react';
import { RationProvider } from './RationContext';
import { RationList } from './RationList';
import { AddRation } from './AddRation';

const App = (props) => {
	return(
		<RationProvider>
			<RationList />
			<AddRation />
		</RationProvider>
	)
}
```

Now i think you must have a good overview of React Hooks. But still  there's a lot more to cover for hooks. Expect a part two soon 🤗.
Until then Adios... Happy Coding!