DEV Community: Ankit Kamboj

Javascript remove duplicate from array of objects

Ankit Kamboj — Mon, 06 Dec 2021 09:18:56 +0000

const seen = new Set();
const arr = [
  { id: 1, name: "test1" },
  { id: 2, name: "test2" },
  { id: 2, name: "test3" },
  { id: 3, name: "test4" },
  { id: 4, name: "test5" },
  { id: 5, name: "test6" },
  { id: 5, name: "test7" },
  { id: 6, name: "test8" }
];

const filteredArr = arr.filter(el => {
  const duplicate = seen.has(el.id);
  seen.add(el.id);
  return !duplicate;
});

Making React App a Progressive Web App (PWA)

Ankit Kamboj — Sun, 10 Jan 2021 05:52:24 +0000

What is a PWA?

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable - Load instantly and never show the down sour, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

1. Register a Service Worker

What is a service worker?
Service workers (client-side proxies that pre-cache key resources) enable PWAs to load instantly and provide an instant,
reliable experience for users, regardless of the network state.

Create a new worker.js file in the public folder (public/worker.js) and add the following code:

Let CACHE_NAME = 'your-app-name';
Let urlsToCache = [
  '/',
  '/completed'
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  Let cacheWhitelist = ['your-app-name'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Note! from above code replace (your-app-name) with your app name

2. Now Update HTML

Update your index.html file in the public folder (public/index.html)
to check if the client’s browser supports service workers. Just Add below code inside the body tag of your app's (public/index.html)

<script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('worker.js').then(function(registration) {
            console.log('Worker registration successful', registration.scope);
          }, function(err) {
            console.log('Worker registration failed', err);
          }).catch(function(err) {
            console.log(err);
          });
        });
      } else {
        console.log('Service Worker is not supported by browser.');
      }
    </script>

3. Activating ServiceWorker

Now go to your app's index.js in the src folder (src/index.js)

Now Update serviceWorker.unregister() to serviceWorker.register() Like Below Code At Last Line

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.register();

Restart (npm start) and reload your React app — you should see the message “Worker registration successful” in the console.

4. Create a manifest.json file

Manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.

{
    "name": "your-app-name",
    "short_name": "your-app-name",
    "icons": [
        {
            "src": "img/logo.png",
            "sizes": "92x92",
            "type": "image/png"
        },
        {
            "src": "/img/logo.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "img/logo.png",
            "sizes": "152x152",
            "type": "image/png"
        }        
    ],
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#f0f2f5",
    "theme_color": "#96f2d7"
}

That's it 🎉 Congratulations, you just created a working progressive web app!

Give The heart ❤️ To Appreciate My Work And Follow Me For More Awesome Content.

This Is "Ankit Kamboj"

Check Out React PWA Demo: https://im.ankitkamboj.in/

Replace lifecycle with hooks in React

Ankit Kamboj — Wed, 19 Aug 2020 08:11:43 +0000

If you have ever used React, you should be familiar with power of React lifecycles. The upcoming React hooks are about to change the way we handle lifecycles.

React hooks are a unification of existing features including state and lifecycles. In this post I am going to show you how to convert lifecycle class methods into React hooks to shine some light on React hooks.

For each of the three most common lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount), I will demonstrate a class style implementation and a hooks style counterpart followed by an explanation.

componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

useEffect is a React hook where you can apply side effects, for example, getting data from server.

The first argument is a callback that will be fired after browser layout and paint. Therefore it does not block the painting process of the browser.

The second argument is an array of values (usually props).

If any of the value in the array changes, the callback will be fired after every render.
When it's not present, the callback will always be fired after every render.
When it's an empty list, the callback will only be fired once, similar to componentDidMount and componentDidUpdate.

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}
useEffect(() => console.log('mounted or updated'));

There is not a straight forward implementation in hooks to replace componentDidUpdate. The useEffect function can be used to trigger callbacks after every render of the component including after component mounts and component updates.

However this is not a big problem since most of the time we place similar functions in componentDidMount and componentDidUpdate.

Mimicing only componentDidUpdate can be a discussion of another post.

componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}
useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

When you return a function in the callback passed to useEffect, the returned function will be called before the component is removed from the UI.

As we discussed previously, we need to pass an empty list as the second argument for useEffect so that the callback will only be called once. This apply to the returned function too.

Normally we do cleanups in the componentWillUnmount. Let's say you want to create an event listener on componentDidMount and clean it up on componentDidUnmount. With hooks the code will be combined into one callback function.

We can create multiple hooks for different side effects and reuse them. Grouping correlated code together and making state management reusable is one of the main purpose of React hooks.

useEffect vs useLayoutEffect

Now we can convert componentDidMount, componentDidUpdate, and componentWillUnmount into React hooks, great!

Not so fast, there is a catch: the effects are not exactly the same between the two styles.

Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event.

Normally this is not a problem. But if you want to manipulate DOM in the effect, and want to make sure it happens before browser paint, you need to use useLayoutEffect. The syntax is the same as useEffect.

Summary

To sum it up, we can use useEffect hook to replace lifecycle methods, but they are not exactly the same. Try to think in hooks when you use them!

References

https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks
https://reactjs.org/docs/hooks-reference.html#useeffect

Routing in React using react-router

Ankit Kamboj — Tue, 30 Jun 2020 07:53:47 +0000

I have seen my fair share of react tutorials, but any time that they talk about navigation using react-router, they only show the way using the Link component. As soon as someone starts working on his/her own project, one of the first problem they come across is how to route pro-grammatically, which basically means routing with ways other than clicking on something wrapped inside a Link component.
This blog mainly aims to be a refuge to those people who come here looking for the answers to this problem.

1. Redirect Component

We can redirect using Redirect component by simply passing the route we want to redirect to and rendering the component. It already comes loaded in the react-router-dom library.

 import { Redirect } from "react-router-dom";

The easiest way to use this method is by maintaining a redirect property inside the state of the component.

state = { redirect: null };
render() {
  if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />
  }
  return(
  // Your Code goes here
  )
}

Whenever you want to redirect to another path, you can simply change the state to re-render the component, thus rendering the Redirect component.

this.setState({ redirect: "/someRoute" });

Note

This is the recommended way to navigate other than the method.
Discussed in detail towards the end of the post.

The downside of this method is that in cases like when we want to redirect directly from a redux action, we cannot do so.

2. useHistory Hook

As of release 5.1.2, react-router ships with some new hooks that can help us access the state of the router.

For now, we only need to talk about the useHistory hook.

import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
}

After this, we can use the .push() method to redirect to any route we want.

history.push('/someRoute')

3. History prop

Every component that is an immediate child of the Route component receives history object as a prop. This is the same history (library) which keeps history of the session of React Router. We can thus use its properties to navigate to the required paths.

this.props.history.push("/first");

A common problem that we can encounter here is that in components which are not immediate child to the Route component, there is no history prop present. This can be easily solved using the withRouter function.

3.1. withRouter

withRouter is a function provided in the react-router-dom library that helps us access the history prop in components which are not immediate children to the Route components.

To import withRouter

import { withRouter } from "react-router-dom";

Now to get the history prop inside our component, we need wrap our component with withRouter while exporting it.

export default withRouter(yourComponent);

We can now access the history prop same as above to do our required navigations.

4. createHistory

The methods we learned above can cover most of the cases that we'll ever encounter while building a react app, so why this fourth method?
Every time we need to redirect from ,say example a redux action, we always have to pass history to the action, unnecessarily increasing the number of arguments. This method can thus be used to get a neater code.

In this method, we make our custom history instance which we can import in other files to redirect.

// Inside /utils/history.js
import createHistory from "history/createBrowserHistory";
export default createHistory();

As BrowserRouter uses its own history and does not accept any outer history property, we have to use Router instead of it.

import { Router } from "react-router-dom";
import history from "./utils/history";

function App(){
  return(
    <Router history={history}>
    // Your Routes go here
    <Router>
  )
}

After this, we can import this history instance in whichever file we want to redirect from.

import history from "./utils/history";

history.push("/somePath");

NOTE
At its core, React is a Declarative approach to building UIs.

Declarative approach is one where we express the logic of a computation without describing its control flow, or without describing what's actually happening behind the scenes.

Due to this reason the recommended way to navigate other than Link is using Redirect component.

There is no harm in using the other methods mentioned here, just that they don't exactly align with React's vision.

Repository
https://github.com/ankitkamboj18