DEV Community: Sajal Shrestha

React Custom Hooks

Sajal Shrestha — Fri, 04 Sep 2020 15:30:11 +0000

Cover Image: educative.io(Cameron Wilson)

React Hooks are here to stay. Assuming you are familiar with React Hooks such as useState, useEffect, useContext, etc. or at least have a basic understanding of the functionality of React hooks. Let's start talking about React custom hooks. I will be precisely explaining from a tutorial video by Stephen Grider. So, with no further delay let's dive into the React custom hooks.

Let's assume that we are working on an online video-sharing platform, like YouTube. Maybe at some point in time, we decide to create another component called Analytics, to show our users some analytics about all the different videos that they have posted. So inside the old components, chances are we are going to need to somehow fetch a list of videos that a user has made. So we might end up deciding to just duplicate or copy-paste all of that video fetching logic from our App component to analytics component. Now, of course, there might be some very small, subtle differences in the video fetching logic between two components(our app and analytics).

Right now, let's just assume that the code is more or less identical in nature. Naturally, any time we've got some identical code shared between two different locations inside of a project, that is usually a sign that we want to extract that code and make it a little bit more reusable in nature.
So, we create a custom hook.

Building your own Hooks lets you extract component logic into reusable functions.

Then, our app component and analytic component can use the custom hook of the videos as opposed to duplicating all that logic between the two components.

Before writing a code let's understand few things about the custom hooks.

It is the best way to create reusable code in a React project except making components. So usually we make use of custom hooks any time we want to make some calls to say useState or useEffect, a little bit more reuseable in nature.
Created by extracting hook-related code out of a function component, We will making the functional component reusable.
Custom hooks are not related for making JSX reusable. To make JSX reusable we create a different component.
Custom hooks always make use of at least one primitive hook internally. Custom hooks contains at least one primitive hook such as useState or useEffect. We are not building anythings such as useState or useEffect from scratch. Instead, we're just talking about taking some existing code that is making use of useState or useEffect or both and putting it to a reusable function. So, the word 'custom hooks' might be misleading because it might make you think we are going to something like useState or useEffect.
Each custom hook should have one purpose: When we build a custom hook we try to have one goal, one purpose, or work with one kind of resource inside of it.
Data-fetching is a great thing to try to make reusable by making a custom hooks.

Process for creating reusable hooks:

1. Identify each line of code related to some single purpose.
In the above code snippet, we are only managing the two pieces of states, they are the list of videos and a selected video.

2. Identify the inputs to that code.
We have to figure out the input in order to run this code. In this there is only one, ie. the default search input("React hooks tutorials").

3. Identify the outputs to that code.
When the code gets the input what must the function App give an output? Well, we have two outputs, one is the video arrays itself and the second is onTermSubmit function.

4. Extract all of the code into a separate function, receiving the inputs as arguments, and returning the outputs. Let's take an example of a sentence for you which might have a clear idea."If you give me a list of inputs(default search term), I will give you a list of outputs (a way to search for videos & a list of videos)."

Now, We create a need folder called 'Hooks' and inside we create a file 'useVideos.js'

*Note: It is not necessary to name a hook starting from 'use' but by convention or usually custom hooks are named like the primitive hooks such as useState and useEffect.

We can return either objects or arrays from the custom hooks. Here we are returning an array of videos and search. Inside the previous App function the function onTermSubmit does not make sense inside this hook. So, I've simply renamed the function to search.

There you go! This is our new custom hook. We can reuse this function in any component to get the video and list of videos by providing a search term.

Meditation 🧘🏻‍♂️ and Programming 👨🏻‍💻.

Sajal Shrestha — Sat, 15 Aug 2020 15:38:27 +0000

Meditation is a precise technique for resting the mind and attaining a state of consciousness that is totally different from the normal waking state. It is the means for fathoming all the levels of ourselves and finally experiencing the center of consciousness within. Meditation is not a part of any religion; it is a science, which means that the process of meditation follows a particular order, has definite principles, and produces results that can be verified.
(via yogainternational).

Hi, I am a CS graduate and a software engineer. I started my journey to inner peace during my 3rd year at the college. And that was without a doubt, the best decision I've ever made in my life 💫 . Things actually started to kick off in terms of my day-to-day life as well as my premier career as a software engineer. Just a couple of weeks after I started to meditate, the way I saw the world around me changed dramatically. The way I viewed my life before and after the meditation was totally incompatible. I discerned that I should have started this practice sooner.

Meditation boosted my software engineering career. Here are a few differences I felt after practicing meditation on a regular basis.

My career goals were clear to me. I made long term career plannings. I was ready to learn, create, and solve difficult problems. I was ready for a life like never before.
Coding is arduous and onerous. Meditation helped me concentrate and to stay focused. It helped me to study and understand the codes like never before. I was able to crack the codes into smaller pieces in order to understand the big picture.
As we know how overwhelming software development is. Every single one of us might have been through so-called the Imposter Syndrome. And sometimes we might even question our career choice as well. After I started meditating, I actually understood the phrase 'one step at a time' or 'bit by bit'.
I came to the realization that just solely coding is not enough. We must know what the heck is going on in this beautiful tech world we live in. So, I started to visit websites like Medium, DEVCommunity, Hacker Noon, and Tech Crunch, on a daily basis in order to keep myself updated with every bit of tech news and gossips.
Meditation taught me to stay calm whenever I got stuck in solving any particular programming problem during development or solving Data Structure and Algorithm problems. An inner voice inside me says something like, 'Hey, I can get through this. Maybe not now. But definitely next time.' So, It literally keeps pushing me again and again.
Meditation has helped me realize what actually matters the most. It has helped me to prioritize the essential aspects of my software development career.
Every day felt like a new day. I cannot wait to get up and start off my day that I've planned last night. I was ready to push myself to the limit to work on my to-do lists.
Self-disciple. Apart from my career, I learned to take care of myself and my daily grind. Such as taking care of my chores, foods and drinks, health and fitness, relationships, friends, and family.
Meditation is assisting me to understand the meaning of life. To live a life, to actually LIVE. To be humble and grateful for who I am and where I am today.
Meditation helped to overcome depression and anxiety which I've been through for a long time.

These are the few main evolvements I saw in myself especially relating to software engineering life. There are definitely a few more changes that I felt, such as my anxiety reduced, the negative emotions reduced, a greater sense of self-awareness, and increasing patience and tolerance.

“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes things worse, but over time it does calm, and when it does, there’s room to hear more subtle things — that’s when your intuition starts to blossom and you start to see things more clearly and be in the present more.” - Steve Jobs

So, basically I practice meditation in the morning between 7-8 AM. I sit on my chair with a perfect poster and tune in to 'Zen Meditation Music' from YouTube for peaceful vibes and simply close my eyes and focus on my breathing. I started off with 2-5 mins during my early days. Now I sit down for 18-20mins a day.

Lastly, I strongly recommend you to do some research on meditation and spend a few minutes of your daily life in finding inner peace within yourself, feel the difference, and step-up your software development game. 😊

PS: This is my first ever blog post on the internet. Excuse me for any kind of flaws.