DEV Community: Tahir Rafique

Website/webApp Speed Optimization!

Tahir Rafique — Tue, 17 Feb 2026 17:48:45 +0000

Coming Soon!

what is memory? need answers form You

Tahir Rafique — Thu, 15 Jan 2026 06:14:13 +0000

?????

Fix Hydration Errors in Next.js

Tahir Rafique — Thu, 01 Jan 2026 09:45:52 +0000

Common Causes of Hydration Errors:

Browser/Environment Issues:

Browser extensions injecting attributes (password managers, ad blockers, accessibility tools)
Browser auto-fill adding attributes to form elements
Third-party scripts modifying the DOM before React hydrates
Different timezones causing date/time mismatches between server and client

Code Issues:

Using browser-only APIs during SSR (window, localStorage, document)
Random values or Math.random() in render (server generates different value than client)
Date objects using new Date() without consistent formatting
Using useEffect or useState that modifies content on initial render
Inconsistent whitespace in template literals (extra spaces, newlines)
Conditional rendering based on client-only values (window.innerWidth, user agent detection)

Data Issues:

Server and client fetching different data or at different times
Missing key props in lists causing reordering issues
Using non-serializable data in server components (functions, symbols)
Inconsistent data formatting between server and client (dates, numbers, locales)

CSS/Styling Issues:

CSS-in-JS libraries that generate different class names on server vs client
CSS modules with inconsistent hash generation
Media queries that apply different styles on server vs client

Component Issues:

Nesting block elements inside inline elements

(<div> inside <p>)

Invalid HTML structure (SSR might render differently than browser parses)
Third-party components that aren't SSR-compatible
Portals rendering in different locations

Best Practice: Always check if code relies on client-only APIs and wrap them in useEffect or use 'use client' directive appropriately.

🧠 Clean folder structure = Clean code = Happy developer's

Tahir Rafique — Sun, 07 Dec 2025 12:35:11 +0000

🗂️ “𝗠𝗮𝘀𝘁𝗲𝗿 𝗥𝗲𝗮𝗰𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗟𝗶𝗸𝗲 𝗮 𝗣𝗿𝗼!” 💻

When your app grows 📈, a messy structure slows you down 🐌. That’s why using a clean, scalable folder structure is the secret to high-performance React development!

Check out this modern React JS project layout👇

✨ Highlights of this structure:

Feature-Based Modules – Keep code modular with features/ like products/ and users/

📁 src/ – React JS Project Structure




src/
│
├── assets/ # Static files (images, fonts, icons)
│ ├── images/
│ ├── fonts/
│ └── icons/
│
├── components/ # Shared/reusable UI components
│ └── common/
│ ├── Button/
│ │ ├── Button.js
│ │ ├── Button.module.css
│ │ └── index.js
│ └── Modal/
│ ├── Modal.js
│ ├── Modal.module.css
│ └── index.js
│
├── layouts/ # Layouts for different pages
│ ├── MainLayout/
│ │ ├── MainLayout.js
│ │ └── MainLayout.module.css
│ ├── AuthLayout/
│ │ ├── AuthLayout.js
│ │ └── AuthLayout.module.css
│ └── index.js
│
├── features/ # Feature-specific modules
│ ├── products/
│ │ ├── components/
│ │ │ └── ProductList.js
│ │ ├── hooks/
│ │ │ └── useProducts.js
│ │ ├── services/
│ │ │ └── productService.js
│ │ └── types/
│ │ └── product.js
│ │
│ └── users/
│ ├── components/
│ │ └── UserProfile.js
│ ├── hooks/
│ │ └── useUser.js
│ ├── services/
│ │ └── userService.js
│ └── types/
│ └── user.js
│
├── hooks/ # Global custom hooks
│ ├── useAuth.js
│ ├── useDebounce.js
│ └── index.js
│
├── routes/ # Route and navigation configs
│ ├── AppRoutes.js
│ ├── ProtectedRoute.js
│ └── index.js
│
├── services/ # Global service files (e.g., axios client)
│ ├── apiClient.js
│ └── errorHandler.js
│
├── store/ # Redux or context-based store
│ ├── slices/
│ │ ├── authSlice.js
│ │ └── productSlice.js
│ ├── hooks.js
│ └── store.js
│
├── styles/ # Global CSS or SCSS files
│ ├── variables.css
│ ├── global.css
│ └── mixins.css
│
├── utils/ # Utility/helper functions
│ ├── constants.js
│ ├── formatters.js
 |
│
├── pages/ # Page components for routing
│ ├── HomePage.js
│ ├── LoginPage.js
 |
│
└── App.js # Main app component

🔸 Reusable Components – Organized in components/common/ for easy UI reuse 🔁

🔸 Layouts & Routes – Centralized layouts and routing logic for better navigation 🔐

🔸 Hooks & Services – Smart separation of custom logic and API calls 🤯

🔸 State Management – Scalable structure with store/ and slices/ for Redux 💾

🔸 Assets, Utils, Styles – Clean up the mess and boost your productivity 🧹

Custom Select-File in react...???

Tahir Rafique — Tue, 14 Oct 2025 19:45:19 +0000

import React, { useState } from 'react';

const FileUpload = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];  // Get the selected file
    setFile(selectedFile);  // Store the file in state
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />

      {file && (
        <div>
          <h3>Selected File:</h3>
          <p>Name: {file.name}</p>
          <p>Size: {file.size} bytes</p>
          <p>Type: {file.type}</p>
        </div>
      )}
    </div>
  );
};

export default FileUpload;

authentication VS authorization

Tahir Rafique — Wed, 17 Sep 2025 12:41:01 +0000

Authentication:(who you are)?
Check if this system/user is really who they claim to be? (Whenever you login to an App/web, whether with a password, Google login, or a token. that's authentication.

Authorization: (What you can do)?
Once you're authenticated, Authorization decides you can read your email, upload files, or access the admin dashboard.

Explanation:

Basic Auth:
The simplest form is Basic Authentication.

Client sends username and password with every request.
These credentials are base64 encoded with an HTTP header.
Server decodes them and checks if they match.
This auth is easy to implement, but it is not secure if not wrapped with HTTPS.
Base64 is not encryption.
Anyone who intercepts it can decode it instantly.
use case example: internal tools, quick tests, or systems behind firewalls.

Bearer Tokens:

User --------> Client -------> Server
1 ----login-------------access----->
2 <--------access granted-----------

Instead of sending (username & password) every time, the client first authenticates once and receives a token.
From then on, every request carries a token in the authorization header.
Server Simple Check if the token is valid to access granted, if not access is denied.
Stateless token instead of a password.
Standard for APIs.

OAuth2:

Client -------sign in with Google---------> App -----------> API

OAuth2 is not a token, it's a protocol ( a framework that defines how applications can delegate authentication).
e.g,
If you login to an app using a Google account.
You click on Sign in with Google.
Google authenticates you, then issues a token to that App.
This way App never sees your Google password.
It just gets a secure confirmation from Google that you are you.
OAuth2 is a foundation for modern login with X, flows like Google, GitHub, Facebook, etc.

JWT (json web token):
JWT is not an authentication method.
It's a token format.
Think of JWT as the envelope that carries claims about the user. A JWT usually contains three parts:
"Header":
which contains the metadata.
"Payload":
with claims for user ID, email, expiration, roles,
"Signature":
Signature used to verify it hasn't been tampered with.
Token format carrying signed claims.
The key benefits are that they are self-contained and verifiable.
The Server doesn't need to store session data.
It just verifies the token Signature.

Access + Refresh Tokens:
short-lived + long-lived combo for security.
Modern systems rarely rely on one long-lived token.
Instead, they use a 2-token model.
Access: short-lived, 15min to 1hrs, used for actual API calls.
Refresh: long-lived days or months, used only to request a new access token.
e.g,
You login and get both tokens.
Then you use an Access token for API calls.
When it expires, your App silently uses the Refresh token to get a new Access token.
This keeps the system secure because stolen access tokens become useless quickly.
While Refresh tokens are typically stored more securely, often on the server side.

SSO (Single Sign-On):
One login, multiple service access.
One Google account has access to YouTube, Gmail, etc.
SSO uses identity protocols like SAML on older systems but still popular in enterprises.
OAuth2 and OpenID Connect in modern software and are used by most Apps today.

Responsive Mobile-App Desing

Tahir Rafique — Wed, 03 Sep 2025 05:50:19 +0000

// import { Dimensions } from 'react-native';
// const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
// const BASE_WIDTH = 430;
// const BASE_HEIGHT = 932;

// export function responsiveFonts(fontSize: number) {
//     return fontSize * (Dimensions.get('window').width / 393);
// }
// export const scale = (size: number) => (SCREEN_WIDTH / BASE_WIDTH) * size;
// export const verticalScale = (size: number) =>
//     (SCREEN_HEIGHT / BASE_HEIGHT) * size;
// export const moderateScale = (size: number, factor = 0.5) =>
//     size + (scale(size) - size) * factor;
// export const { width, height } = Dimensions.get('window');

React Native responsiveness

Tahir Rafique — Wed, 27 Aug 2025 07:40:10 +0000

// import { Dimensions } from 'react-native';
// const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
// const BASE_WIDTH = 430;
// const BASE_HEIGHT = 932;

// export function responsiveFonts(fontSize: number) {
//     return fontSize * (Dimensions.get('window').width / 393);
// }
// export const scale = (size: number) => (SCREEN_WIDTH / BASE_WIDTH) * size;
// export const verticalScale = (size: number) =>
//     (SCREEN_HEIGHT / BASE_HEIGHT) * size;
// export const moderateScale = (size: number, factor = 0.5) =>
//     size + (scale(size) - size) * factor;
// export const { width, height } = Dimensions.get('window');

How MNC React Developer

Tahir Rafique — Tue, 19 Aug 2025 20:58:31 +0000

How I Became a React.js Developer in a Top MNC (and How You Can Too!)

When I started my journey in web development, I was fascinated by how React.js was powering modern applications across the globe. But honestly, the road wasn’t easy—I made mistakes, learned from them, and built a roadmap that finally helped me land in a top MNC.

Here’s my roadmap (so you don’t repeat my mistakes):

Step 1: Master the Fundamentals
• Solidify your knowledge of HTML, CSS, JavaScript (ES6+).
• Understand the “why” behind JavaScript concepts like closures, promises, and async/await.

Step 2: Dive Deep into React.js
• Learn about components, props, state, and hooks.
• Understand how to manage state using Redux or Context API.
• Explore React Router for navigation.

Step 3: Build Real Projects
• Don’t just learn theory—build.
• I created dashboards, e-commerce clones, and portfolio apps.
• Each project improved my problem-solving and debugging skills.

Step 4: Learn Ecosystem Tools
• Git & GitHub for collaboration.
• REST APIs & GraphQL for real-world integration.
• Testing (Jest/React Testing Library), a skill that many skip.

Step 5: Prepare for Interviews
• Practice DSA basics (arrays, strings, recursion, problem-solving mindset).
• Revise React source code level concepts (virtual DOM, reconciliation, rendering).
• Mock interviews helped me understand my weak spots.

Mistakes I Made (That You Should Avoid):
• Ignoring core JavaScript early on (React is built on JS).
• Learning too many frameworks at once instead of focusing.
• Not contributing to open-source or GitHub early (it boosts your profile).
• Underestimating soft skills—communication is as important as coding.

My Advice: Focus on clarity over speed. Don’t rush to become a “full-stack developer” on Day 1. Start small, be consistent, and your growth will compound.

Today, working at an MNC, I can say one thing: It’s not luck, it’s preparation meeting opportunity.

Husky Command to fix husky error

Tahir Rafique — Wed, 06 Aug 2025 04:33:11 +0000

bash: ls .husky
npx husky -v

(if not installed)
npm install husky --save-dev
npx husky install

React in 2 mints

Tahir Rafique — Wed, 18 Jun 2025 19:22:35 +0000

REACT in 2min

React Basics

React is a JavaScript library for building user interfaces
Developed and maintained by Meta (Facebook)
Uses component-based architecture
JSX is used to write HTML-like code in JavaScript
Components can be class-based or function-based

JSX (JavaScript XML)

Syntax extension for writing UI in React
Looks like HTML but is converted to JavaScript
Must return a single parent element
Use {} for embedding JavaScript expressions
Use className instead of class for CSS

Components

Components are reusable UI elements
Two types: Functional and Class components
Functional components are more common and support Hooks
Props are used to pass data to components
Props are read-only

Props

Short for "properties"
Passed as attributes to components
Accessed via props object
Useful for customizing component content
Props cannot be modified inside the child component

useState Hook

useState() is used to declare state in functional components
Returns an array: [state, setState]
Re-render occurs when setState is called

useEffect Hook

useEffect() manages side effects (like API calls, timers)
Accepts a function and an optional dependency array
Runs after every render by default
To run once on mount, pass an empty dependency array

Conditional Rendering

Use ternary or logical && to render content conditionally
Example: {isLoggedIn ? : }
Prevent rendering with null or short-circuiting

Lists and Keys

Use map() to render lists of components
Each item must have a unique key prop
Keys help React identify which items changed

Forms in React

Controlled components bind form inputs to state
Use onChange handler to update state
Handle form submission with onSubmit event

Event Handling

Events are camelCase (e.g., onClick, onChange)
Use functions as event handlers
event.preventDefault() prevents default behavior

React Router

Used for client-side routing
Install via react-router-dom
Key components:

BrowserRouter, Routes, Route, Link, useNavigate
Enables single-page application navigation

useRef Hook

Provides a mutable ref that doesn’t cause re-renders
Use for DOM access or persisting values between renders

Context API

Used for global state management
Create context with createContext()
Provide context with Context.Provider
Access context with useContext()

useContext Hook

Consumes context values inside functional components
Avoids prop drilling
Good for theming, user auth, global data

useReducer Hook

Alternative to useState for complex state logic
Useful when managing multiple state variables or actions
Syntax similar to Redux

Custom Hooks

Functions that use React hooks inside
Reusable across multiple components
Must start with use prefix (e.g., useForm, useToggle)

React Performance Tips

Use React.memo() to avoid unnecessary re-renders
Use useCallback() to memoize functions
Use useMemo() to memoize expensive calculations

You don’t need 10 years of experience to be a great developer.

Tahir Rafique — Mon, 16 Jun 2025 18:09:10 +0000

You don’t need 10 years of experience to be a great developer.
You need 2 years of the right experience.

We’ve all seen it on job listings:

“Senior Developer – 8+ years of experience required.”
But let’s be honest… it’s not the years that count, it’s what you did with them.

⚡️ One dev might spend 5 years copying code and avoiding complexity.
⚡️ Another might spend 2 years solving real problems, building systems end to end, learning from failures, and asking hard questions.

Experience is not just time, it’s intensity, ownership, and curiosity.

I’ve seen developers with “junior” titles outperform so-called seniors, simply because they’ve been in environments that challenged them, mentored them, and pushed them beyond comfort zones.

So maybe it’s time we stop using experience like a stopwatch…
…and start asking:
“What have you actually built?”
“What did you learn when things broke?”
“How did you grow when things got tough?”

What’s your take on this?
Does time still matter — or is trajectory the real measure of experience?