Dependency array, code optimization, useCallback, and more
Hooks are a great way to access React’s state and lifecycle methods from a functional component. The useEffect Hook is a function (effect, as React calls it) placed in your component that runs after render and every time the DOM updates.
In this article, we’ll discuss some tips to better use the useEffect Hook.
1. Child Effects Fire First
Think of the useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
So the useEffect Hook behaves similarly to the class lifecycle methods. One behaviour to note is that the child callback is fired prior to the parent callback. You can check this behaviour here.
Say you have to trigger a payment automatically. This code is written in the child component that runs after render, but the actual details (total amount, discount, etc.) required for payment is set in the parent component. In this case, as payment is triggered even before setting the details required, it won’t be successful. …
Add beautiful gradients to your website or app
The most popular use of linear-gradient or radial-gradient is for adding a gradient background. But did you know that we could create vibrant texts, underline them, add section dividers, and style buttons all using gradient?
The best example is the gradient border that appears around the user profile on Instagram stories.
You can even build a site like my portfolio using various gradient styles.
TL;DR
You can refer to the styles discussed in this article, implemented using React and Sass, here.
Basics
Throughout this article, we have to create a basic gradient background for decorating the elements. So let’s refresh the basics:
To create a basic gradient we use the methods linear-gradient or radial-gradient to pass in a few colours and the direction at which you prefer the colours to flow. …
React Hooks and other methods
Despite the wide availability of npm packages, at times, we might need to rely on a few external libraries that require us to import some JS files.
For features used across the application, we can simply add JS files to head using the <script> tag in our global index.html file.
However, for the features that are used in specific components, this makes no sense. Since React doesn’t support the <script> tag in Component, here are a few ways of appending JS files to specific components.
React-script-tag
This is the easiest way of loading JS files for a beginner.
React-script-tag is an npm package that provides a React <script> tag that supports universal rendering. All standard <script> attributes like async, src, type, and defer are supported, including onLoad and onError callbacks. …
Knowing to log data to your DevTools console is one of the essential debugging skills when it comes to javaScript. I realised that there are many convenient and efficient ways of doing this and would like to share with the community.
Printing messages 🖨
We might be familiar with the most basic console.log() and console.info() that prints the value of the variable/message to the console.
Depcheck -A New Magic Wand
With the wide availability of packages in NPM, we very often tend to add plenty of packages. With time, and due to poor management of code, the dependency tree grows and adds extra weight to the bundle.
Identifying and removing unused dependencies manually would be a hideous process. Thankfully, we have yet another package available in NPM to identify the unused dependencies in our package.json file 😂
Depcheck:
Depcheck analyses package.json to output: how each dependency is used, all the redundant dependencies and the missing dependencies
The process is pretty simple. All you have to do is the usual:
npm install -g…There is a lot that Google dev tools could do, but this article will focus on identifying unused code.
Why find unused code?
The very basic reason is performance improvement. The lesser the files, the faster the page loads.
47 per cent of consumers expect a web page to load in two seconds or less. 40 per cent of consumers will wait no more than three seconds for a web page to render before abandoning the site.
Imagine all the users/customers you could lose visiting your website just because it doesn’t load in a few seconds. …
I have been self-studying react.js for a while now and fortunately, got a job offer as Frontend Developer. But soon I realised that there were a lot more git commands that I have to use than I knew when it comes to a real-time project. So here are some of the essential git commands I would like to share with you.
Clone a repository:
To copy code from version control to your local computer:
$ git clone <repository_path>The repository path could be cloned either through HTTPS or SSH.
Branching:
We create a new branch to diverge from the main code (usually the master branch) and continue to do work without messing with it. …
