Build Twitter Bot Without Code

Harsh Makadia — Tue, 08 Jun 2021 17:58:36 +0000

Build a Twitter Bot with ZERO lines of code completely using nocode tools 🎉

We will learn how to bookmark Tweet in Public and Push the same content in Airtable so that you can use it for further reference whenever needed.

What benefits do I get?

Share all your bookmarked Tweets in Public
Your followers can also follow your bookmark handle to follow your awesome collections
Bookmarked Tweets also get posted in Airtable data for further and easy reference
You can email yourself these bookmarked Tweets via Automation once a week/month. It is fact that we never get time to ready bookmarked tweets, this automation will make sure you get weekly emails to read them.

Link:
https://gumroad.com/l/twitter-bot

Making API Calls with React Hooks

Harsh Makadia — Tue, 20 Aug 2019 14:15:58 +0000

Originally posted on Medium in Bits and Pieces

With the new updates coming up in the React library, it's indeed impossible to
use all the new React features in your application. It’s been 6 months since the
official release of React Hooks which was released with React 16.8.0 (February
6, 2019)

This article will help you take the baby steps in using React Hooks, it will
explain all the basic approach which you can take to make the most out of this
beautiful feature.

React Hooks [ Icon Credit — wanicon,
freepik ]

Let’s start with Quick Introduction to React Hooks

Hooks are functions that let you “hook into” React state and lifecycle features
from function components. Hooks don’t work in classes — they let you use React
without classes.

useState 😄

useState is a Hook, We call it inside a function component when we want to
add some local state to it. The good thing about this is that the state will be
preserved during re-rendering.

useState returns a pair: the current state value and a function that
lets you update your component. Calling a function will work similarly to
this.setState where it will update the values of the state, except it will not
merge old and new state.

useEffect 😄

The Effect Hook, useEffect adds the ability to perform side effects from a
function component.

The purpose of useEffect is similar to the purpose of Lifecycle methods in the
class component like componentDidMount , componentDidUpdate and
componentWillUnMount

You can also decide when to re-render. Consider below the example where we have
passed a count array after the useEffect.

Let’s consider if the count value is 60 and if the component re-renders with the
count value being unchanged i.e. 60, React will compare the previous render
value and decide whether to call effect or not. If values are different then
only the effect is called. Now that’s a way to increase performance and avoid
unnecessary calls. 💯 🚀

If there are multiple items in the array, React will re-run the effect even if
just one of them is different.

Converting Class Component into a Functional Component with Hooks ⚖️

Let’s look at the example of how we can get the same behavior as a class
component in a function component using Hooks.

Example: Consider an example where you need to make API calls and fetch the
data and populate in our component and clicking on the load more button would
fetch more data from the server.

Until the Release of React 16.8.0(Hooks), it wasn't possible to achieve these
using functional components as lifecycle methods aren’t accessible in the
functional component and it wasn’t possible to manage the state inside a
functional component.

For making API calls we will use Github APIs
https://developer.github.com/v3/search/#search-commits

Here is what a typical React code looks like for both ordinary class component
and functional component using Hooks.

API call code Icon Credit —
Roundicons ]

Whenever API calls are involved we need multiple state values —

Holding that data that is to be rendered
Page count to make API call
Loading state (show loading screen/component until the data is received from server)
Error state (show error message when something goes wrong while fetching data)

Thus above image with Class component and the functional component does the same
thing of loading the commits from the Github. Thus this simple example will help
you understand how easy it is to start using hook into your application. With
hooks, you can use write code neatly and sort.

API Calls with React Hooks

Code Snippet — Class Component API calling Code

— Hooks API calling Code

Links to Live Demo

https://codesandbox.io/s/functional-component-api-calls-qgho3

Here are the rules you should keep in mind while working with React Hooks

Don’t try to convert the old code written in class components into Hooks. However, it is recommended you can try using Hooks in the new implementation
useState and useEffect are the two new concepts which you should know to master Hooks
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.

Thus this is how React Hooks can be useful in making API calls, sometimes we
have to convert a functional component into a class component only because of
not being able to manage the state inside the functional component.

Reference
- https://reactjs.org/

Happy Learning 💻 😄

DEV Community: Harsh Makadia

Build Twitter Bot Without Code

Making API Calls with React Hooks

useState 😄

useEffect 😄

Converting Class Component into a Functional Component with Hooks ⚖️

Related Stories