DEV Community: Abhishek Naidu

10 React Hooks Explained ✨

Abhishek Naidu — Sat, 06 Feb 2021 20:38:05 +0000

This blog is originally published on: My Blog

Before React Hooks (React < 16.8), developer's were required to write class components in order to take advantage of certain React Features. But now, React Hooks provides a more ergonomic way to build components because we can use stateful logic without changing our component hierarchy.

There are 10 Hooks in total 🔥

🚀 useState :

It is the most important and often used hook. The purpose of this hook to handle reactive data, any data that changes in the application is called state, when any of the data changes, React re-renders the UI.



const [count, setCount] = React.useState(0);

🚀 useEffect :

It allows us to implement all of the lifecycle hooks from within a single function API.



// this will run when the component mounts and anytime the stateful data changes
React.useEffect(() => {
    alert('Hey, Nads here!');
});

// this will run, when the component is first initialized
React.useEffect(() => {
    alert('Hey, Nads here!');
}, []);

// this will run only when count state changes
React.useEffect(() => {
    fetch('nads').then(() => setLoaded(true));
}, [count]);

// this will run when the component is destroyed or before the component is removed from UI.
React.useEffect(() => {
    alert('Hey, Nads here');

    return () => alert('Goodbye Component');
});

🚀 useContext :

This hook allows us to work with React's Context API, which itself a mechanism to allow us to share data within it's component tree without passing through props. It basically removes prop-drilling



const ans = {
    right: '✅',
    wrong: '❌'
}

const AnsContext = createContext(ans);

function Exam(props) {
    return (
        // Any child component inside this component can access the value which is sent.
        <AnsContext.Provider value={ans.right}>
            <RightAns />
        </AnsContext.Provider>
    )
}

function RightAns() {
    // it consumes value from the nearest parent provider.
    const ans = React.useContext(AnsContext);
    return <p>{ans}</p>
    // previously we were required to wrap up inside the AnsContext.Consumer
    // but this useContext hook, get rids that.
}

🚀 useRef :

This hook allows us to create a mutable object. It is used, when the value keeps changes like in the case of useState hook, but the difference is, it doesn't trigger a re-render when the value changes.

The common use case of this, is to grab HTML elements from the DOM.



function App() {
    const myBtn = React.useRef(null);
    const handleBtn = () => myBtn.current.click();
    return (
        <button ref={myBtn} onChange={handleBtn} >
        </button>
    )
}

🚀 useReducer :

It does very similiar to setState, It's a different way to manage state using Redux Pattern. Instead of updating the state directly, we dispatch actions, that go to a reducer function, and this function figure out, how to compute the next state.

Fig. useReducer Architecture



function reducer(state, dispatch) {
    switch(action.type) {
        case 'increment':
            return state+1;
        case 'decrement':
            return state-1;
        default:
            throw new Error();
    }
}

function useReducer() {
    // state is the state we want to show in the UI.
    const [state, dispatch] = React.useReducer(reducer, 0);

    return (
        <>
        Count : {state}
        <button onClick={() => dispatch({type:'decrement'})}>-</button>
        <button onClick={() => dispatch({type:'increment'})}>+</button>
        </>
    )
}

🚀 useMemo :

This hook will help you to optimise computational cost or improve performance. It mostly used when we're needed to make expensive calculations.



function useMemo() {

    const [count, setCount] = React.useState(60);

    const expensiveCount = useMemo(() => {
        return count**2;
    }, [count]) // recompute when count changes.
}

Works great for memoizing returned values, but in other CSSNamespaceRule, we want to memoize the whole function, in that case we can use this hook ↓

🚀 useCallback :



function useCallbackDemo() {
    const [count, setCount] = useState(60);

    const showCount = React.useCallback(() => {
        alert(`Count ${count}`);
    }, [count])

    return <> <SomeChild handler = {showCount} /> </>
}

🚀 useImperativeHandle :

This hook is use to modify the exposed ref and it is rarely used.



function useImperativeHandleDemo(props, ref) {

    const myBtn = useRef(null);

    React.useImperativeHandle(ref, () => ({
        click: () => {
            console.log('clicking button!');
            myBtn.current.click();
        }
    }));
}

🚀 useLayoutEffect :

It works same as useEffect hook with one difference, the callback will run after rendering the component but before the actual updates have been painted to the screen.

⚠️ : Blocks visual updates until your callback is finished.



function useLayoutEffectDemo() {

    const myBtn = React.useRef(null);

    React.useLayoutEffect(() => {
        const rect = myBtn.current.getBoundingClientRect();
        // scroll position before the dom is visually updated
        console.log(rect.height);
    })
}

🚀 useDebugValue :

This hook doesn't make much sense, but it allows us to define our own custom labels in React Dev Tools, which are useful for debugging. Suppose we have n number of components which uses the same logic, then we can separately define our own function and that can be used in other components, but the key thing here is we can debug things



function useDisplayName() {
    const [displayName, setDisplayName] = React.useState();

    React.useEffect(() => {
        const data = fetchFromDatabase(props.userId);
        setDisplayName(data.displayName);
    }, []);

    React.useDebugValue(displayName ?? 'loading...');
    return displayName;
}

The return value can be used in other components or else where in the application like this 👇🏽



function App() {
    const displayName = useDisplayName();

    return <button>{displayName}</button>;
}

References - Fireship's Youtube Video - React Hooks

Want to connect? twitter

Mac OS Keyboard substitution's for most useful thing's 🔥

Abhishek Naidu — Tue, 29 Dec 2020 12:55:30 +0000

Are you the one, who fed up of copy and pasting urls, emoticons, icons when filling up application forms or organizing any other things??

If yes, then there's a cool solution for you guys 🤗 🎉 -

For more details, regarding how to set up and use like it a pro, check this link: 👇🏽

abhisheknaiidu / shortski

Mac OS Keyboard substitution's for most useful thing's

Fed up of copy and pasting `urls`, `emoticons`, `icons` when filling up application forms or organizing any other things??

Here's the solution: 👇🏽

Installation:

How to install:

Download the shortski.plist file.
Change username's and url's for all the handle's and add your's :p
Save it and Navigate to System Preferences → Keyboard → Text
Drag and drop the downloaded shortski.plist to the text window.

View on GitHub

Tweets

Abhishek Nads

@abhisheknaiidu

Fed up of copy and pasting urls, icons when filling up application forms or organizing things?? Here's Keyboard substitutions on MacOS, which literally are life-saver😇Just added a workflow and how I use it for myself😃
link - github.com/abhisheknaiidu…

10:48 AM - 29 Dec 2020

0 2

That's it :D
Thanks for reading so far, I hope you guys like it.
For more information, lets connect on Twitter!

Happy Hacktoberfest 2020!

Abhishek Naidu — Fri, 02 Oct 2020 02:37:42 +0000

Hello everyone,

As Hacktoberfest 2020 is started, I wanted to share with you a repository that's created just for Developer's to contribute and grab free SWAGS ✨

Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.

abhisheknaiidu / hacktoberfest2020

Submit Just 4 PRs to earn SWAGS 🔥

Hacktoberfest 2020 🎉

🗣 Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.

📢 Register here for Hacktoberfest and make four pull requests (PRs) between October 1st-31st to grab free SWAGS 🔥.

Few issues for developer's. Take up any issue and send your first PR!

Repository	Issues	Pull Requests	Forks	Stars
awesome-github-profile-readme
a-pop
Appwrite
arm
class-karona
Gwion
iiitdmj-gpa
image-creator
javascript30
portfolio
quarantine-days
todoist-readme

License

To the extent possible under law, Abhishek Naidu has waived all copyright and related or neighboring rights to this work.

View on GitHub

TL;DR
Make sure to Star(watch) this repo to keep yourself updated.

P.S - Project maintainers can also add their work, in this repository

For more information, ping me on Twitter!

Lets Hack Together! 🎉🎊

Our Discord Channel : Link

Happy Hacktoberfest 2020!

Abhishek Naidu — Thu, 24 Sep 2020 09:32:29 +0000

Hello everyone,

As Hacktoberfest 2020 is about to get started, I wanted to share with you a repository that's created just for Developer's to contribute and grab free SWAGS ✨

Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.

abhisheknaiidu / hacktoberfest2020

Submit Just 4 PRs to earn SWAGS 🔥

Hacktoberfest 2020 🎉

🗣 Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.

📢 Register here for Hacktoberfest and make four pull requests (PRs) between October 1st-31st to grab free SWAGS 🔥.

Few issues for developer's. Take up any issue and send your first PR!

Repository	Issues	Pull Requests	Forks	Stars
awesome-github-profile-readme
a-pop
Appwrite
arm
class-karona
Gwion
iiitdmj-gpa
image-creator
javascript30
portfolio
quarantine-days
todoist-readme

License

To the extent possible under law, Abhishek Naidu has waived all copyright and related or neighboring rights to this work.

View on GitHub

TL;DR
Make sure to Star(watch) this repo to keep yourself updated.

P.S - Project maintainers can also add their work, in this repository

For more information, ping me on Twitter!

Lets Hack Together! 🎉🎊

Show your latest to-do's and Todoist stats automatically on your GitHub profile readme

Abhishek Naidu — Sat, 12 Sep 2020 23:36:14 +0000

This blog is originally published on: My Blog

I use Todoist and Notion App, a lot for organizing my work and maintaining my Timeline. I actually had this idea of automating and showing todoist stats on my README (as Notion doesn't have it's own API till now), a long back when GitHub launched their Profile README's, but due to some work and busy schedule , I'm not able to work on this, but few days ago, I saw DEV's post regarding GitHub Actions hackathon in collaboration with GITHUB. That's when I thought, It's the best time to work on this automation stuff.

Fast Forward to today: I build this automation in just 3 Days, Published it, and also using it!

abhisheknaiidu / todoist-readme

🚧 Updates README with Todoist Stats of a user

🚧 Todoist Stats

⚡️📌 Update your Todoist Stats ✅

Setup

Prep work

You'll need a Todoist API Token. You can get that from here
- if you're new to Todoist, then you can refer here.
You need to save the Todoist API Token in the repository secrets. You can find that in the Settings of your Repository. Be sure to save those as the following
- TODOIST_API_KEY = <your todoist API token>
You need to update the README file(README.md) with 2 comments. You can refer here for updating it.

Update your README

Add a comment to your README.md like this:

# Todoist Stats
<!-- TODO-IST:START -->
<!-- TODO-IST:END -->

These lines will be our entry-points for the todoist stats.

New to Todoist

Todoist gives you the confidence that everything’s organized and accounted for, so you can make progress on the things that are important to you.

Create a Todoist account…

View on GitHub

Todoist Readme Workflow:

Todoist Readme just needs your TODOIST_API_KEY, and if you're PREMIUM user, we have some features also for you guy's 😉

Submission Category: Wacky Wildcards

The Workflow looks this:

Repository Workflow For Non-Premium Users:

  name: Todoist Readme

  on:
    workflow_dispatch:
    schedule:
      # Runs every minute 
      - cron: '* * * * *'

  jobs:
    update-readme:
      name: Update todoist stats
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - uses: abhisheknaiidu/todoist-readme@master
          with:
            TODOIST_API_KEY: ${{ secrets.TODOIST_API_KEY }}

Repository Workflow For Premium Users:

  name: Todoist Readme

  on:
    workflow_dispatch:
    schedule:
      # Runs every minute 
      - cron: '* * * * *'

  jobs:
    update-readme:
      name: Update todoist stats
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - uses: abhisheknaiidu/todoist-readme@master
          with:
            TODOIST_API_KEY: ${{ secrets.TODOIST_API_KEY }}
            PREMIUM: true

If you loved the project, do share and 🌟 the Repo!

Let's Dive Into Core ES6 Concepts 🔥

Abhishek Naidu — Mon, 07 Sep 2020 02:56:03 +0000

ES6 or ES2015 is one of the core fundamental concept of JavaScript. It unifies the standards and functionality of the script to a great extent.

🟡 Template Literals :

Template Literals can be used anywhere, where strings are used. It uses backticks (`) instead of ugly single and double quotes. Let's talk about the benefits of this:

✨ String Interpolation:
This we can think of it as a way of accessing JavaScript Variables and including that variable or expression in a string. It can be done by using interpolation operator ${}

const lastName = 'Things';

//Without Template Literals
console.log('Stranger ' + lastName); // Stranger Things

// With Template Literals
console.log(`Stranger ${lastname}`); // Stranger Things

✨ Multi-Line Display:
We can also use enter/return when typing template literal, it will then cause the string to be displayed on multiple lines!

let bio = `CS Undergrad and  // newline character \n
Software Developer           // will be added to
among many other things.`;   // the whole string.

🟡 Using Default Parameter Values :

The default assignment statement, only occurs if no arguement is passed into the function.

function sayHey(name = 'Suzie') {
    console.log(`Hey ${name}`);
}
sayHey('Dustin') // Hey Dustin
sayHey(); // Earlier, it used to give undefined
// but with default para, it gives - Hey Suzie

🟡 Mixing Defaults and Non-Defaults :

We just need to make sure, we always set the default value at the end of the parameter list, otherwise it may give NaN result.

function doSum(a,b=1) {
    console.log(a+b);
}
doSum(2,3); // 5
doSum(3); // 4, here a = 3, b = 1

🟡 Arrow Functions :

It's more shorter and concise way of representing functions. It just replaces the function() with () =>
Syntax will be :

const sayHey = () => "value" 
// this will return value by default!

✨ Shorthand : When an arrow function has just a single parameter, then we can ignore parenthesis ()

const whichMonth = month => console.log(month);
whichMonth(September); // September

✨ Most Important 'this' Borrower Arrow Expressions do not have their own this value. This doesn't mean that we can't use them, We can but the value of this will be the surroundings of arrow function.

Before Arrow Functions, We need to bind this, in order to access this

class Wallet {
    constructor() {
        this.money = 200;
    }

    increaseMoney() {
        function IncrementM() {
            this.money++;
        } // before binding, this refers to global window object.
        setInterval(IncrementM.bind(this), 100);
    }
}

let w = new Wallet();
w.increaseMoney();

It's working because we are no longer allowing the default this value. Instead, we are manually setting it to this at this moment in time.

After Arrow Functions Came, It's more concised now 🎉

class Wallet {
    constructor() {
        this.money = 200;
    }

    increaseMoney() {
        setInterval(() => {
            this.money++;
        }), 100);
    }
}

let w = new Wallet();
w.increaseMoney();

🟡 Spread Syntax :

It basically sends all the values of an array into a function as arguments, using the spread operator (...)

const addSum = (a,b,c) => console.log(a+b+c);

const values = [3,4,5];

addSum(...values);

// Same as
addSum.apply(null, values);

// Same as
addSum(3,4,5);

✨ Important : We can also spread the characters of an string into an array

const str = 'abhi';
const char = [...str];
console.log(char); // ['a','b','c','d']

🟡 De-structuring Assignment :

It gives us the power to, take out the elements which are required from a larger piece of structured data. It can be only performed on arrays and objects. When we do array de-structuring, then it will be based on position and with objects, it will be based on property names!

let mail = {
    name: 'Abhishek',
    programme: BSoC,
    email: 'geekyabhi12@gmail.com'
};
// Order doesn't matter when destructuring!
const selected = ({ programme, name }) => {
    return console.log(`Congratulations ${name}! You've been selected for ${programme}!`);
}
// We can also rename the property!
let {name: firstName} = mail;

selected(mail);
// Congratulations Abhishek! You've been selected for BSoC!

This Blog is originally published on : My Blog WebSite

How I got 100+ ⭐️ in just less than a day on GitHub?!

Abhishek Naidu — Tue, 14 Jul 2020 17:58:06 +0000

My Github Repo awesome-github-profile-readme got 100+ 🌟 in just less than a day, I will explain how this repo is helping people to get more insights regarding the new cool feature, launched by GitHub i.e Github Profile README.

abhisheknaiidu / awesome-github-profile-readme

😎 A curated list of awesome Github Profile READMEs 📝

Awesome GitHub Profile README

A curated list of awesome Github Profile READMEs

Loved the project? Please consider donating to help it improve!

How To Create A GitHub Profile README

Monica Powell ・ Jul 11 ・ 3 min read

#github #branding #markdown

**So, what does Awesome Github Profile README has to do with it?👀**

It's actually a place, where you'll find a list of all the awesome Github Profile READMEs, which Tools they have used to make it more interactive, and also a few bunch of famous known Articles, which give insights and more ideas on how you can set up your own.

Tweets

Abhishek Naidu 😷

@geeky_abhiz

OMG, Finally we did it, 100 ⭐️ in less than a day, that’s insane !!!!
Glad that people all around the world are finding it useful and helpful 🌈

github.com/abhisheknaiidu…

@github

18:29 PM - 13 Jul 2020

0 11

Abhishek Naidu 😷

@geeky_abhiz

Another Milestone Reached, 150+ ⭐️
Thanks EveryOne @GitHubCommunity @github 🥳

github.com/abhisheknaiidu…

#DEVCommunity #githubprofile #github

09:29 AM - 14 Jul 2020

1 3

That's it :D
I hope you guys like it. And make sure to give it a star on Github

P.S - If anyone, who thinks that their README is beautiful or stands out in some way, then they can showcase their GitHub profile readme in the discussion section 😉.

Awesome GitHub Profile README’s

Abhishek Naidu — Sun, 12 Jul 2020 22:19:30 +0000

Finally, the wait is over, Awesome GitHub Profile README’s is here, If anyone, who wants to showcase their GitHub profile readme, they can share it here :

https://github.com/abhisheknaiidu/awesome-github-profile-readme

Developer's Blog

Abhishek Naidu — Tue, 10 Dec 2019 19:26:51 +0000

100DaysOfCode D1-4

Spent time building up a blog for Developer's called Dev's Blog, built in semantic-ui to enhance UI and UX capability. It has CRUD functionalities.

Check-out folks: https://github.com/abhisheknaiidu/Dev-s-Blog

Nodejs #learntocode #javascript #web #webdev #code #301DaysOfCode #semantic #ui #ux

ARM

Abhishek Naidu — Fri, 29 Nov 2019 17:34:12 +0000

Another Awesome Project MADE LOVE!

ARM - Management for users, to upload, download and manage important documents of a particular discipline. We'll be maintaining our Database on CRUD Functionalities.

https://github.com/abhisheknaiidu/A-R-M

Day 2: Analog Clock in Vanilla JS

Abhishek Naidu — Wed, 30 Oct 2019 04:15:55 +0000

Started 30 Javascript Challenge by wesbos.
Checkout Guys -

https://abhisheknaiidu.github.io/JavaScript30/Day2/

Github Link: https://github.com/abhisheknaiidu

Day1 : Drum Kit in Vanilla JS

Abhishek Naidu — Mon, 28 Oct 2019 04:49:58 +0000

Started 30 Javascript Challenge by wesbos.
Checkout Guys -

https://abhisheknaiidu.github.io/JavaScript30/Day1/

Github Link: https://github.com/abhisheknaiidu

DEV Community: Abhishek Naidu

10 React Hooks Explained ✨

🚀 useState :

🚀 useEffect :

🚀 useContext :

🚀 useRef :

🚀 useReducer :

🚀 useMemo :

🚀 useCallback :

🚀 useImperativeHandle :

🚀 useLayoutEffect :

🚀 useDebugValue :

Mac OS Keyboard substitution's for most useful thing's 🔥

abhisheknaiidu / shortski

Mac OS Keyboard substitution's for most useful thing's

Fed up of copy and pasting urls, emoticons, icons when filling up application forms or organizing any other things??

Here's the solution: 👇🏽

Installation:

Happy Hacktoberfest 2020!

abhisheknaiidu / hacktoberfest2020

Submit Just 4 PRs to earn SWAGS 🔥

Hacktoberfest 2020 🎉

🗣 Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.

License

Happy Hacktoberfest 2020!

abhisheknaiidu / hacktoberfest2020

Submit Just 4 PRs to earn SWAGS 🔥

Hacktoberfest 2020 🎉

🗣 Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2020 challenge and earn a limited edition T-shirt.

License

Show your latest to-do's and Todoist stats automatically on your GitHub profile readme

abhisheknaiidu / todoist-readme

🚧 Updates README with Todoist Stats of a user

🚧 Todoist Stats

Setup

Prep work

Update your README

New to Todoist

Todoist Readme Workflow:

Submission Category: Wacky Wildcards

Repository Workflow For Non-Premium Users:

Repository Workflow For Premium Users:

Let's Dive Into Core ES6 Concepts 🔥

🟡 Template Literals :

🟡 Using Default Parameter Values :

🟡 Mixing Defaults and Non-Defaults :

🟡 Arrow Functions :

🟡 Spread Syntax :

🟡 De-structuring Assignment :

How I got 100+ ⭐️ in just less than a day on GitHub?!

abhisheknaiidu / awesome-github-profile-readme

😎 A curated list of awesome Github Profile READMEs 📝

Awesome GitHub Profile README

Contents:

Categories

Github Actions 🤖

Game Mode 🚀

So, what exactly is a Github Profile README? 🤔

How To Create A GitHub Profile README

Monica Powell ・ Jul 11 ・ 3 min read

So, what does Awesome Github Profile README has to do with it?👀

Awesome GitHub Profile README’s

Developer's Blog

100DaysOfCode D1-4

Nodejs #learntocode #javascript #web #webdev #code #301DaysOfCode #semantic #ui #ux

ARM

Day 2: Analog Clock in Vanilla JS

Day1 : Drum Kit in Vanilla JS

Fed up of copy and pasting `urls`, `emoticons`, `icons` when filling up application forms or organizing any other things??

**So, what does Awesome Github Profile README has to do with it?👀**