DEV Community: Ayushi Verma

Let's Hook Into React Hooks

Ayushi Verma — Tue, 10 May 2022 15:39:57 +0000

We all are using react hook, but did we know, Why we need them? Why hooks came in picture?, and its okay if you are not aware about hooks, we will cover basic understanding of hooks.

So, Lets have a look around it.

Why Hooks?
Type of Hooks?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Why Hooks?

Originally, React relied heavily on class components, which made switching between classes, higher-order components, and render props a pain. You can now do all of this without switching, using functional components and react hooks.
Hooks improve React by allowing you to write simpler code that accomplishes identical functionality more quickly and effectively.
Hooks let you use more of React’s features without classes.

Before digging into its implementation, keep the following qualities in mind:

The initial render creates its initial state.
Its status can be changed at any time.
In future renderings, React would remember the state of the hook.
Based on the calling sequence, React would supply you with the appropriate state.

Some rules

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions.

Let's talk about it's type

State Hook

The useState hook is the first one we'll look at. Long before, you couldn't use the local state in a functional component. But with useState you can change local state.

How fascinating, itsn't it?

Consider the following example of a counter:

Understanding useSate:

The first two parameter in array are as follow: the first value count is the "state variable", you can call it anything instead of count, like aloo-kachaloo, it doesn't matter but its prefered to name according to it's work. Normally, variables “disappear” when the function exits but state variables are preserved by React.
The second is the function which actually is a state updating function setCount, which helps us to update the value of our state variable.
We pass the initial state in useState() argument. And unlike with classes, the state doesn’t have to be an object. We can keep a number or a string.
UseState returns a pair of values: the current state and a function that updates it.

Effect Hook

UseEffect, the Effect Hook lets you perform side effects in function components. And If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Typical application cases for useEffect hooks are:

data fetching and consuming data from a server API,
handling subscriptions with event listeners
dealing with manual DOM changes.

The callback function we pass to the useEffect hook runs the side effects. React runs it on every render of a component by default. However, side effects can be expensive and performance-intensive to run on every render. We can control it using the dependency array argument we pass to the useEffect hook.

Here is how you can see some examples:

Side Effect Runs After Every Render

Side Effect Runs Only Once After Initial Render

Side Effect Runs After State Value Changes

Other React hooks include:

useContext(): This hook helps to build a context API, which itself is a mechanism used to share data without passing props.

useRef(): This hook allows you to reference the DOM in the functional component directly.

Note: useRef() doesn’t trigger a re-render like setState() does.

useReducer(): This stores the current state value. You can liken it to Redux.

useMemo(): This is a hook used to return a memoized value, i.e. when you need your function to return a cached value.

useCallback: This hook is used when you have a component’s child continuously re-rendering. It will then return a memoized version of the callback that only changes when one of the dependencies changes.

I guess that's pretty much to get started with hooks, yet there is a lot to explore refer this for more deep learning.

Thank you, happy coding:)

APIDESK

Ayushi Verma — Sun, 08 May 2022 16:58:54 +0000

ApiDesk

v-1.0.3

About

ApiDesk is a chrome extension that makes api testing easier. You don't have to create long api call methods like fetch and axios, and you don't have to specify headers or data in it using code, to test.
ApiDesk has a simple and user friendly user interface.
ApiDesk makes searching for errors in stackoverflow simple and quick with just two clicks.

How to Use

Apis

Methos: GET

By default we have set the GET method
Put the Api Url
You can edit the header if required, with the header key(Accept) and header value(*/*)
Submit the request

Response:
Response Body will show header and Data

Methos: POST

Select the POST method
Put the Api Url
You can edit the header if required, with the header key(Accept) and header value(*/*)
Add the data in JSON format. Exmple: {"key":"value"}
Submit the request

Response:
Response Body will show header and Data

Methos: DELETE

Select the DELETE method
Put the Api Url
You can edit the header if required, with the header key(Accept) and header value(*/*)
Submit the request

Response:
Response Body will show header and Data

Stackoverflow

What if we told you that you could search for your issue in only two clicks? You wouldn't have to open a new tab to do so, we've got you covered. We've integrated stackoverflow error search as well.
Enter your error in the StackOverflow tab and hit search; you will be sent to the stackoverflow page.
Real time update with cool UI

VScode Shortcut Suggestions

Get ProTips of VScode Shortcut every second.

Contributer:

Ayushi Verma Github
Nishant Kumar Tiwari Github

Github Link:

Give a Star if you find ApiDesk useful :)

Note: ApiDesk is available in chrome web store, Add to your chrome.

Temporal dead zone(TDZ)

Ayushi Verma — Mon, 10 Jan 2022 09:46:06 +0000

Let's discuss the temporal dead zone in depth!

We Know Let and Const declarations are known to be hoisted.

And, if we talk about hoisting, it's the default behavior of moving all declarations to the top of the scope before code execution, which means we can access variables before they're initialized because in js memory is allocated to each variable even before a single line of code is executed.

Let take an example and try to understand this

here you can see the varVariable is called before it is being initialized and we did not even get the error, this is because the var is Global scope, varVariable got some memory in the Global scope but the value is not initialized hence giving undefined.

But wait ! Why are we getting an error here? If you say that I told you that memory is allocated to every variable even before a single line of code is executed, but we still get a reference error. Then hold on, memory is allocated to letVariable, but in a different memory space, which is not global as let being block scope, and we are unable to inspect these let and const before assigning them a value.

Here's where the Temporal Dead Zone comes in. We're getting the value of letVariable now, and we can see what TDZ is- It is the time between since when the let/const variable was hoisted and till it is initialized some value.

In other words,

The time window in which a variable exists but is still uninitialized and thus cannot be accessed in any way is known as the TDZ. That initialization can only be achieved by implementing the instructions left by the Compiler at the time of the original declaration. The TDZ is now complete, and the variable can be used for the remainder of the scope.

A var also has a TDZ, but it's zero in length and therefore invisible to our programs, Only let and const have a TDZ that can be observed.

And Why TDZ happen?

Let/const declarations are hoisted too but like var they are not auto-initialized until they are initialized in the code sequence, hence resulting in TDZ.

Hope you like it, comment the feedbacks:)
Happy Coding