React router is one of the most used router in the React community.
It allows us to write `Routes` in nested forms. Routes are nothing but React components. Nested Routes have advantages when we want to show sub parts of pages based on conditions. Nested routes also cause less remounts as only the content for the nested route will mount again.
Bit of why we need nested routes
Let’s say we have a route system like this:
<Router><Route path="/checkout/passengerdetails"><ComponentA /></Route><Route path="/checkout/baggage"><ComponentB /></Route></Router>
Do you ever has the need to preview `pdf` on web ?. It’s so common but still draws every ounce of energy from a developer to make it work properly on every device.
Why it has to be so hard ?
My Attempts
1. Just open the pdf in the new tab and the browser will take care of it to preview correctly.
**Problem**: It’s not always the best experience for the user. You don’t want user to switch the context by moving to a separate tab. It looks much bad when it happens on mobile device. …
Photo from https://unsplash.com/@proxyclick
QrCode is a common way of sharing information without getting into long URLs. Most common of them which everybody must have used are how we make payments todays. Payment infrastructures like GPay, UPI, PAYtm, PapPal e.t.c , all make use of QRCode scanning for easy payment process. Today you go to any shop, you can find payment QRCodes in most of the places.
Recently I had a a problem statement of implementing QRCode scan for web (desktop and mobile both) .
I thought that should be easy and readily available.
Expectations
Let’s see what were my expectations with…
TLDR:
- Shebangs lines are added on top of command-line files. The line tells the system which executable has to be used to run the current file. The shebang line looks something like this:
#!/usr/bin/env nodeThe above line means: Execute with a node interpreter, using the program search path to find it.
2. The System looks for command files or executables in all the directories pointed by PATH environment variable. You can also run different scripting executables using right shebang syntax.
3. So to have a valid command, mostly you need to have the executable file in…
My experience with React hooks have been amazing. In this article, I will precisely talk on one of the most prominent hooks that we use on a daily basis which is useEffect.
I am assuming the readers coming to this article has good understanding on useEffect. If not, please first go through the concept at reactjs.org.
So essentially, useEffect react to changes in dependency list. They have replaced componentDidMount, componentDidUpdate, componentWillUnmount and componentWillReceiveProps in class based react components.
It’s very common to react to changes in props values or state values over the lifetime of a component. we also need…
What if I have to control the react components from non-react codebases ? Let me re-phrase it with some concrete scenario.
What if I need to open a react modal from non-react codebase like utils functions, fetch wrapper e.t.c
This is such a common use case. We want to show the modal, then and there , when some condition passes. That condition can be in a non-react codebase.
Let see how we can do it.
All the modern applications, make use ES6 modules and they have live bindings. …
I love controlled components. Do you ?. Such a cliche question, but anyways let’s talk about controlled components with hooks.
They make your components flexible. They also help you keep a single source of truth for your component’s data.
You never want to mix controlled and uncontrolled components. More on this here React controlled vs uncontrolled.
Controlled components are better when thinking in react mindset. That way you don’t have to think about the UI updates. React gives you the guarantee that UI shown to you is in-sync with your data in almost all the cases.
But creating controlled components…
A beautiful afternoon, working on regular stuff. Everything was going smoothly. Then a notification pops up on my screen saying `Hi`
who’s that?
Found out it was our DevOps Architect. I replied `Hi`. I thought he pinged me for some regular build related query.
We will be calling Our DevOps Architect as D.A in the rest of the article.
But next ping was a start to a very interesting problem and at the same time challenging.
He asks me this question
Can we separate the env generation part and the build process? …
Well, here I am explaining the pattern in React hooks. Who am I ? No body !! Don’t be mad because this is opinionated. Things which worked for me and the people around me.
That’s it.
First let’s take a step back, and understand what changed with react hooks. Well, A lot has changed but we will talk about those things which are going to be relevant for the the discussion ahead.
From now on I will be calling React hooks as just hooks. I am tired of adding React in front of every hook word :).
So the hooks…
I have been working on hooks for quite a long time. I use react hooks every day in my open source projects and also at work.
Now, using useEffect, useCallback, useMemo have really helped me compose the logic well together. But when the dependency list gets long. When I say long , it can be any thing greater than 3 for me and can be more or less for others.
With these large dependency array, I found it really difficult to debug and find out what is causing my useEffect to run again( same for useCallback and useMemo). …
