DEV Community: Shashank Trivedi

Hands-On Workshop: Refactoring Anti-Patterns

Shashank Trivedi — Mon, 09 Feb 2026 07:15:03 +0000

Exercise 1: Spot the Anti-Patterns (20 minutes)

Instructions

Review each code snippet and identify the anti-patterns. Write down:

What anti-pattern(s) you see
Why it's problematic
What principle(s) it violates

Code Snippet A: User Dashboard

const UserDashboard = () => {
  const [user, setUser] = useState();
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [likes, setLikes] = useState(0);
  const [loading1, setLoading1] = useState(false);
  const [loading2, setLoading2] = useState(false);
  const [loading3, setLoading3] = useState(false);
  const [error1, setError1] = useState();
  const [error2, setError2] = useState();
  const [error3, setError3] = useState();

  useEffect(() => {
    setLoading1(true);
    fetch('/api/user/123')
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading1(false);
      })
      .catch((e) => {
        setError1(e);
        setLoading1(false);
      });

    setLoading2(true);
    fetch('/api/posts/123')
      .then((res) => res.json())
      .then((data) => {
        setPosts(data);
        setLoading2(false);
      });

    setLoading3(true);
    fetch('/api/comments/123')
      .then((res) => res.json())
      .then((data) => {
        setComments(data);
        setLoading3(false);
      });
  }, []);

  if (loading1 || loading2 || loading3) return <div>Loading...</div>;
  if (error1) return <div>Error: {error1}</div>;

  return (
    <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
      <div style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
        {user ? user.name : 'Unknown User'}
      </div>
      <div style={{ display: 'flex', gap: '16px' }}>
        <div style={{ flex: 1, padding: '16px', backgroundColor: 'white', borderRadius: '8px' }}>
          <h2 style={{ fontSize: '18px', marginBottom: '8px' }}>Posts ({posts.length})</h2>
          {posts.map((post) => (
            <div key={post.id} style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd' }}>
              {post.title}
            </div>
          ))}
        </div>
        <div style={{ flex: 1, padding: '16px', backgroundColor: 'white', borderRadius: '8px' }}>
          <h2 style={{ fontSize: '18px', marginBottom: '8px' }}>Comments ({comments.length})</h2>
          {comments.map((comment) => (
            <div key={comment.id} style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd' }}>
              {comment.text}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Anti-Patterns Present:

Click to see answers

Anti-Patterns Identified:

God Component - Component does too much (fetching, state management, rendering)
Poor Error Handling - Errors not handled consistently, no retry mechanism
Inline Styles - All styles inline, not reusable
Duplicated Logic - Three nearly identical fetch calls
State Management - Too many separate loading/error states
Magic Numbers - Hardcoded user ID '123'

Principles Violated:

Single Responsibility
DRY (Don't Repeat Yourself)
Separation of Concerns

Exercise 2: Refactor the God Component (30 minutes)

Your Task

Refactor the UserDashboard from Exercise 1. Split it into:

Custom hooks for data fetching
Smaller, focused components
Proper TypeScript types
CSS modules for styling

Step-by-Step Guide

Step 1: Define Types

// types/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
}

export interface Post {
  id: string;
  title: "string;"
  content: string;
  userId: string;
}

export interface Comment {
  id: string;
  text: string;
  postId: string;
  userId: string;
}

Step 2: Create Data Fetching Hook

// hooks/useUserData.ts
interface UseUserDataResult {
  user: User | null;
  posts: Post[];
  comments: Comment[];
  loading: boolean;
  error: Error | null;
  refetch: () => void;
}

export function useUserData(userId: string): UseUserDataResult {
  // YOUR CODE HERE
  // Hint: Use a single state object for all data
  // Hint: Fetch all data in one useEffect
  // Hint: Include proper error handling
}

Your Implementation:

// Write your solution here

Step 3: Create Sub-Components

// components/UserDashboard/UserHeader.tsx
interface UserHeaderProps {
  user: User;
}

export const UserHeader = ({ user }: UserHeaderProps) => {
  // YOUR CODE HERE
};

// components/UserDashboard/PostsList.tsx
interface PostsListProps {
  posts: Post[];
}

export const PostsList = ({ posts }: PostsListProps) => {
  // YOUR CODE HERE
};

// components/UserDashboard/CommentsList.tsx
interface CommentsListProps {
  comments: Comment[];
}

export const CommentsList = ({ comments }: CommentsListProps) => {
  // YOUR CODE HERE
};

Your Implementation:

// Write your solutions here

Step 4: Create CSS Module

/* UserDashboard.module.css */
/* YOUR CODE HERE */

Step 5: Refactor Main Component

// components/UserDashboard/index.tsx
import styles from './UserDashboard.module.css';
import { useUserData } from '../../hooks/useUserData';
import { UserHeader } from './UserHeader';
import { PostsList } from './PostsList';
import { CommentsList } from './CommentsList';

export const UserDashboard = ({ userId }: { userId: string }) => {
  // YOUR CODE HERE
};

Your Implementation:

// Write your solution here

Click to see solution

// hooks/useUserData.ts
export function useUserData(userId: string): UseUserDataResult {
  const [state, setState] = useState&lt;{
    user: User | null;
    posts: Post[];
    comments: Comment[];
    loading: boolean;
    error: Error | null;
  }&gt;({
    user: null,
    posts: [],
    comments: [],
    loading: false,
    error: null,
  });

  const fetchData = useCallback(async () =&gt; {
    setState((prev) =&gt; ({ ...prev, loading: true, error: null }));

    try {
      const [userData, postsData, commentsData] = await Promise.all([
        fetch(`/api/user/${userId}`).then((r) =&gt; r.json()),
        fetch(`/api/posts/${userId}`).then((r) =&gt; r.json()),
        fetch(`/api/comments/${userId}`).then((r) =&gt; r.json()),
      ]);

      setState({
        user: userData,
        posts: postsData,
        comments: commentsData,
        loading: false,
        error: null,
      });
    } catch (error) {
      setState((prev) =&gt; ({
        ...prev,
        loading: false,
        error: error instanceof Error ? error : new Error('Failed to fetch data'),
      }));
    }
  }, [userId]);

  useEffect(() =&gt; {
    fetchData();
  }, [fetchData]);

  return { ...state, refetch: fetchData };
}

// components/UserDashboard/index.tsx
export const UserDashboard = ({ userId }: { userId: string }) =&gt; {
  const { user, posts, comments, loading, error, refetch } = useUserData(userId);

  if (loading) return ;
  if (error) return ;
  if (!user) return ;

  return (







  );
};

Exercise 3: Eliminate Magic Numbers (15 minutes)

Code to Refactor

// File: utils/validation.ts
export function validatePassword(password: string): boolean {
  if (password.length < 8) return false;
  if (password.length > 128) return false;
  if (!/[A-Z]/.test(password)) return false;
  if (!/[a-z]/.test(password)) return false;
  if (!/[0-9]/.test(password)) return false;
  if (!/[!@#$%^&*]/.test(password)) return false;
  return true;
}

export function validateUsername(username: string): boolean {
  if (username.length < 3) return false;
  if (username.length > 20) return false;
  if (!/^[a-zA-Z0-9_]+$/.test(username)) return false;
  return true;
}

export function validateFile(file: File): boolean {
  const maxSize = 10485760; // bytes
  if (file.size > maxSize) return false;

  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) return false;

  return true;
}

Your Task

Extract all magic numbers and strings to named constants
Make error messages clear and informative
Return detailed validation results instead of just boolean

Your Refactored Code:

// Write your solution here

Click to see solution

// constants/validation.ts
export const PASSWORD_CONSTRAINTS = {
  MIN_LENGTH: 8,
  MAX_LENGTH: 128,
  REQUIRED_PATTERNS: {
    UPPERCASE: /[A-Z]/,
    LOWERCASE: /[a-z]/,
    DIGIT: /[0-9]/,
    SPECIAL: /[!@#$%^&amp;*]/,
  },
} as const;

export const USERNAME_CONSTRAINTS = {
  MIN_LENGTH: 3,
  MAX_LENGTH: 20,
  ALLOWED_PATTERN: /^[a-zA-Z0-9_]+$/,
} as const;

export const FILE_UPLOAD_CONSTRAINTS = {
  MAX_SIZE_BYTES: 10 * 1024 * 1024, // 10MB
  ALLOWED_MIME_TYPES: ['image/jpeg', 'image/png', 'image/gif'] as const,
} as const;

// types/validation.ts
export interface ValidationResult {
  valid: boolean;
  errors: string[];
}

// utils/validation.ts
export function validatePassword(password: string): ValidationResult {
  const errors: string[] = [];

  if (password.length &lt; PASSWORD_CONSTRAINTS.MIN_LENGTH) {
    errors.push(`Password must be at least ${PASSWORD_CONSTRAINTS.MIN_LENGTH} characters`);
  }

  if (password.length &gt; PASSWORD_CONSTRAINTS.MAX_LENGTH) {
    errors.push(`Password must be no more than ${PASSWORD_CONSTRAINTS.MAX_LENGTH} characters`);
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.UPPERCASE.test(password)) {
    errors.push('Password must contain at least one uppercase letter');
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.LOWERCASE.test(password)) {
    errors.push('Password must contain at least one lowercase letter');
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.DIGIT.test(password)) {
    errors.push('Password must contain at least one digit');
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.SPECIAL.test(password)) {
    errors.push('Password must contain at least one special character (!@#$%^&amp;*)');
  }

  return {
    valid: errors.length === 0,
    errors,
  };
}

export function validateUsername(username: string): ValidationResult {
  const errors: string[] = [];

  if (username.length &lt; USERNAME_CONSTRAINTS.MIN_LENGTH) {
    errors.push(`Username must be at least ${USERNAME_CONSTRAINTS.MIN_LENGTH} characters`);
  }

  if (username.length &gt; USERNAME_CONSTRAINTS.MAX_LENGTH) {
    errors.push(`Username must be no more than ${USERNAME_CONSTRAINTS.MAX_LENGTH} characters`);
  }

  if (!USERNAME_CONSTRAINTS.ALLOWED_PATTERN.test(username)) {
    errors.push('Username can only contain letters, numbers, and underscores');
  }

  return {
    valid: errors.length === 0,
    errors,
  };
}

export function validateFile(file: File): ValidationResult {
  const errors: string[] = [];

  if (file.size &gt; FILE_UPLOAD_CONSTRAINTS.MAX_SIZE_BYTES) {
    const maxSizeMB = FILE_UPLOAD_CONSTRAINTS.MAX_SIZE_BYTES / 1024 / 1024;
    errors.push(`File size must be less than ${maxSizeMB}MB`);
  }

  if (!FILE_UPLOAD_CONSTRAINTS.ALLOWED_MIME_TYPES.includes(file.type as any)) {
    errors.push(`File type must be one of: ${FILE_UPLOAD_CONSTRAINTS.ALLOWED_MIME_TYPES.join(', ')}`);
  }

  return {
    valid: errors.length === 0,
    errors,
  };
}

Exercise 4: Replace Switch Statement (15 minutes)

Code to Refactor

interface Notification {
  type: 'info' | 'success' | 'warning' | 'error';
  message: string;
}

export function getNotificationIcon(type: Notification['type']): React.ReactNode {
  switch (type) {
    case 'info':
      return <InfoIcon color="blue" size={24} />;
    case 'success':
      return <CheckIcon color="green" size={24} />;
    case 'warning':
      return <AlertIcon color="orange" size={24} />;
    case 'error':
      return <ErrorIcon color="red" size={24} />;
    default:
      return <InfoIcon color="gray" size={24} />;
  }
}

export function getNotificationColor(type: Notification['type']): string {
  switch (type) {
    case 'info':
      return '#3b82f6';
    case 'success':
      return '#10b981';
    case 'warning':
      return '#f59e0b';
    case 'error':
      return '#ef4444';
    default:
      return '#6b7280';
  }
}

export function getNotificationTitle(type: Notification['type']): string {
  switch (type) {
    case 'info':
      return 'Information';
    case 'success':
      return 'Success';
    case 'warning':
      return 'Warning';
    case 'error':
      return 'Error';
    default:
      return 'Notification';
  }
}

Your Task

Refactor to use configuration objects instead of switch statements.

Your Refactored Code:

// Write your solution here

Click to see solution

// constants/notifications.ts
import { InfoIcon, CheckIcon, AlertIcon, ErrorIcon } from '@/components/icons';

interface NotificationConfig {
  icon: React.ComponentType&lt;{ size: number }&gt;;
  color: string;
  title: string;
}

export const NOTIFICATION_CONFIGS: Record = {
  info: {
    icon: InfoIcon,
    color: '#3b82f6',
    title: 'Information',
  },
  success: {
    icon: CheckIcon,
    color: '#10b981',
    title: 'Success',
  },
  warning: {
    icon: AlertIcon,
    color: '#f59e0b',
    title: 'Warning',
  },
  error: {
    icon: ErrorIcon,
    color: '#ef4444',
    title: 'Error',
  },
} as const;

const DEFAULT_CONFIG: NotificationConfig = {
  icon: InfoIcon,
  color: '#6b7280',
  title: 'Notification',
};

// utils/notifications.ts
export function getNotificationConfig(type: Notification['type']): NotificationConfig {
  return NOTIFICATION_CONFIGS[type] ?? DEFAULT_CONFIG;
}

export function getNotificationIcon(type: Notification['type']): React.ReactNode {
  const config = getNotificationConfig(type);
  const IconComponent = config.icon;
  return ;
}

export function getNotificationColor(type: Notification['type']): string {
  return getNotificationConfig(type).color;
}

export function getNotificationTitle(type: Notification['type']): string {
  return getNotificationConfig(type).title;
}

// Even better: Use the config directly in components
export const NotificationComponent = ({ notification }: { notification: Notification }) =&gt; {
  const config = getNotificationConfig(notification.type);
  const IconComponent = config.icon;

  return (


      <h3>{config.title}</h3>
      <p>{notification.message}</p>

  );
};

Exercise 5: Fix Prop Drilling (20 minutes)

Code to Refactor

// App.tsx
const App = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [user, setUser] = useState<User | null>(null);
  const [language, setLanguage] = useState('en');

  return (
    <Layout theme={theme} setTheme={setTheme} user={user} language={language}>
      <Dashboard theme={theme} user={user} language={language} setTheme={setTheme}>
        <Sidebar theme={theme} user={user} language={language}>
          <UserMenu user={user} theme={theme} setTheme={setTheme} language={language} />
          <Navigation language={language} theme={theme} />
        </Sidebar>
        <MainContent theme={theme} user={user} language={language}>
          <Header user={user} theme={theme} language={language} />
          <Content language={language} />
        </MainContent>
      </Dashboard>
    </Layout>
  );
};

Your Task

Create Context for theme, user, and language
Create custom hooks to access these values
Remove prop drilling

Your Solution:

// contexts/AppContext.tsx
// YOUR CODE HERE

// hooks/useTheme.ts, useUser.ts, useLanguage.ts
// YOUR CODE HERE

// Refactored App.tsx
// YOUR CODE HERE

Click to see solution

// contexts/AppContext.tsx
interface AppContextValue {
  theme: Theme;
  user: User | null;
  language: string;
  setTheme: (theme: Theme) =&gt; void;
  setUser: (user: User | null) =&gt; void;
  setLanguage: (language: string) =&gt; void;
}

const AppContext = createContext(undefined);

export const AppProvider = ({ children }: { children: React.ReactNode }) =&gt; {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);
  const [language, setLanguage] = useState('en');

  const value = useMemo(
    () =&gt; ({
      theme,
      user,
      language,
      setTheme,
      setUser,
      setLanguage,
    }),
    [theme, user, language],
  );

  return {children};
};

// hooks/useApp.ts
export const useApp = () =&gt; {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within AppProvider');
  }
  return context;
};

export const useTheme = () =&gt; {
  const { theme, setTheme } = useApp();
  return { theme, setTheme };
};

export const useUser = () =&gt; {
  const { user, setUser } = useApp();
  return { user, setUser };
};

export const useLanguage = () =&gt; {
  const { language, setLanguage } = useApp();
  return { language, setLanguage };
};

// Refactored App.tsx
const App = () =&gt; {
  return (














  );
};

// Components consume only what they need
const UserMenu = () =&gt; {
  const { user } = useUser();
  const { theme, setTheme } = useTheme();
  // Use user and theme
};

const Header = () =&gt; {
  const { user } = useUser();
  // Only needs user
};

Exercise 6: Improve Error Handling (20 minutes)

Code to Refactor

const DataFetcher = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then(setData)
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const FileUploader = () => {
  const handleUpload = async (file: File) => {
    try {
      await uploadFile(file);
      alert('Done!');
    } catch (error) {
      alert('Failed!');
    }
  };

  return <input type="file" onChange={(e) => handleUpload(e.target.files[0])} />;
};

Your Task

Add proper loading and error states, user feedback, and retry mechanisms.

Your Solution:

// Write your solution here

Click to see solution

// hooks/useDataFetch.ts
interface UseDataFetchState {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export function useDataFetch(fetchFn: () =&gt; Promise) {
  const [state, setState] = useState&gt;({
    data: null,
    loading: false,
    error: null,
  });

  const execute = useCallback(async () =&gt; {
    setState({ data: null, loading: true, error: null });

    try {
      const result = await fetchFn();
      setState({ data: result, loading: false, error: null });
    } catch (error) {
      const apiError = error instanceof Error ? error : new Error('An unexpected error occurred');
      setState({ data: null, loading: false, error: apiError });
      logError(apiError);
    }
  }, [fetchFn]);

  return { ...state, execute, refetch: execute };
}

// Refactored DataFetcher
const DataFetcher = () =&gt; {
  const { data, loading, error, refetch } = useDataFetch(() =&gt;
    fetch('/api/data').then((res) =&gt; {
      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
      return res.json();
    }),
  );

  useEffect(() =&gt; {
    refetch();
  }, [refetch]);

  if (loading) {
    return ;
  }

  if (error) {
    return (


          <p>Failed to load data: {error.message}</p>
          Retry


    );
  }

  if (!data || data.length === 0) {
    return ;
  }

  return (

      {data.map((item) =&gt; (
        {item.name}
      ))}

  );
};

// Refactored FileUploader
const FileUploader = () =&gt; {
  const [uploadState, setUploadState] = useState&lt;{
    status: 'idle' | 'uploading' | 'success' | 'error';
    message?: string;
    progress?: number;
  }&gt;({ status: 'idle' });

  const handleUpload = async (file: File) =&gt; {
    setUploadState({ status: 'uploading', progress: 0 });

    try {
      await uploadFileWithProgress(file, (progress) =&gt; {
        setUploadState({ status: 'uploading', progress });
      });

      setUploadState({
        status: 'success',
        message: `Successfully uploaded ${file.name}`,
      });

      // Auto-clear after 3 seconds
      setTimeout(() =&gt; {
        setUploadState({ status: 'idle' });
      }, 3000);
    } catch (error) {
      const errorMessage = error instanceof Error ? `Upload failed: ${error.message}` : 'An unexpected error occurred';

      setUploadState({
        status: 'error',
        message: errorMessage,
      });

      logError(error, { context: 'file-upload', fileName: file.name });
    }
  };

  return (

       e.target.files?.[0] &amp;&amp; handleUpload(e.target.files[0])}
        disabled={uploadState.status === 'uploading'}
      /&gt;

      {uploadState.status === 'uploading' &amp;&amp; }

      {uploadState.message &amp;&amp; (
         setUploadState({ status: 'idle' })}
        /&gt;
      )}

  );
};

Bonus Exercise: Real Codebase Refactoring (30+ minutes)

Task

Find a file in your codebase with anti-patterns
Identify 2-3 specific anti-patterns
Refactor the code
Create a PR with before/after comparison
Present your refactoring to the group

Checklist

[ ] Identified specific anti-patterns
[ ] Wrote proper TypeScript types
[ ] Extracted magic numbers/strings
[ ] Improved error handling
[ ] Added tests
[ ] Updated documentation
[ ] Code review feedback addressed

Workshop Wrap-up

Group Discussion (20 minutes)

Questions to discuss:

Which anti-pattern is most common in our codebase?
Which refactoring had the biggest impact?
What obstacles do we face when refactoring?
How can we prevent anti-patterns in new code?
What should our team coding standards include?

Action Items

Individual commitments:

I will refactor *********_********* this week
I will watch for *********_********* in code reviews
I will share *********_********* with the team

Team commitments:

Update code review checklist
Schedule monthly code quality sessions
Create ESLint rules for common anti-patterns
Document team coding standards

Additional Resources

Practice Repos

Reading

"Refactoring" by Martin Fowler
"Clean Code" by Robert Martin
"Effective TypeScript" by Dan Vanderkam

Tools

ESLint with TypeScript rules
SonarQube for code quality metrics
Prettier for consistent formatting

Feedback Form

Please provide feedback:

What worked well in this workshop?
What could be improved?
Which exercises were most valuable?
What topics would you like to cover next?
Would you recommend this to other developers?

Remember: Refactoring is a skill that improves with practice.

Don't aim for perfect code - aim for continuous improvement!

Code Anti-Patterns and Best Practices Guide

Shashank Trivedi — Mon, 09 Feb 2026 06:59:49 +0000

Code Anti-Patterns and Best Practices Guide (Conceptual Edition)

This document intentionally uses masked / pseudo-code.
The goal is to explain design ideas, not provide copy-paste implementations.

1. Switch / If-Else Ladders

❌ Anti-Pattern

function handle(type) {
  if (type === 'A') return ResultA;
  else if (type === 'B') return ResultB;
  else if (type === 'C') return ResultC;
  // keeps growing...
  else return DefaultResult;
}

Problems

Hard to extend
Violates Open/Closed Principle
Increasing cognitive load

✅ Better Pattern: Lookup Strategy

const TYPE_MAP = {
  A: ResultA,
  B: ResultB,
  C: ResultC,
};

function handle(type) {
  return TYPE_MAP[type] ?? DefaultResult;
}

2. Magic Numbers and Strings

❌ Anti-Pattern

if (value > 52428800) {
  throw Error('Too large');
}

✅ Better Pattern

const LIMITS = {
  MAX_SIZE: /* 50 MB */,
};

if (value > LIMITS.MAX_SIZE) {
  throw Error('Too large');
}

3. Code Duplication

❌ Anti-Pattern

function actionFromScreenA() {
  /* same logic */
}

function actionFromScreenB() {
  /* same logic again */
}

✅ Better Pattern

function sharedAction(input, callbacks) {
  /* common logic */
}

4. Redundant State

❌ Anti-Pattern

state = {
  data,
  filteredData,
  count,
  hasData,
};

✅ Better Pattern

state = {
  data,
  filter,
};

// filteredData, count derived when needed

5. Long Parameter Lists

❌ Anti-Pattern

createReport(a, b, c, d, e, f, g);

✅ Better Pattern

createReport({
  title,
  range,
  format,
  metadata,
});

6. Inline Styles Everywhere

❌ Anti-Pattern

<div style={{ /* many inline values */ }} />

✅ Better Pattern

<div className="card" />

7. Scattered Filter Logic

❌ Anti-Pattern

// repeated in many places
data.filter(/* custom logic */);

✅ Better Pattern

applyFilters(data, filters);

8. `any` Type Abuse

❌ Anti-Pattern

function process(data: any): any {}

✅ Better Pattern

function process(data: KnownType): ResultType {}

9. Prop Drilling

❌ Anti-Pattern

<ComponentA prop={x}>
  <ComponentB prop={x}>
    <ComponentC prop={x} />
  </ComponentB>
</ComponentA>

✅ Better Pattern

// shared context / store
useSharedValue();

10. God Components

❌ Anti-Pattern

// 1000-line component
// state + API + logic + UI mixed

✅ Better Pattern

// small components
// hooks for logic
// composition at top level

11. Premature Optimization

❌ Anti-Pattern

// caching, memoization, virtualization everywhere

✅ Better Pattern

// simple code first
// optimize after measuring

12. Poor Error Handling

❌ Anti-Pattern

catch (e) {
  console.log(e);
}

✅ Better Pattern

showErrorToUser();
logErrorWithContext();
allowRetry();

Summary Checklist

Prefer clarity over cleverness
Centralize logic
Derive state instead of storing it
Optimize only after measuring
Write code for humans first

Last updated: February 2026

React - Quick Revision

Shashank Trivedi — Fri, 07 Mar 2025 16:28:54 +0000

Bytegrad best practices React

Bytegred Typescript for React

How React works under the hood

Prisma ORM

Shashank Trivedi — Mon, 21 Oct 2024 11:10:30 +0000

1- Install Prisma: If you haven't installed Prisma yet, run the following commands to install it:

npm install prisma --save-dev
npx prisma init

2- Update the prisma/schema.prisma file:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

3- Set the correct DATABASE_URL in your .env file, such as:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

4- To generate prisma modal from existing tables

npx prisma db pull


/* This command will introspect the existing database and
automatically generate models in the `prisma/schema.prisma` file
based on the structure of your tables. */

5- Once the introspection is done, you can generate Prisma Client to interact with your database.

npx prisma generate

Key terms In data analytics

Shashank Trivedi — Fri, 18 Oct 2024 07:53:42 +0000

You must have heard about the terms Metric , What is a Dimension , what is a segment and even what is a characteristic , how these terms are different and why it is important to understand each of them.

Let's begin.

Metric: A measurable number that quantifies performance or an outcome.A metric is a numerical value that represents something you’re tracking.
Examples:

Website analytics: Page views, Sessions, Bounce rate.
E-commerce: Revenue, Total orders, Conversion rate.

Dimensions: A descriptive attribute that adds context to a metric.A dimension gives more context to your data, often answering "when," "where," or "which category.

For a metric like Total sales:
- Dimensions could be:
- Date (Sales on Oct 17)
- Product category (Shoes vs. Electronics)
- Location (Sales from New York)

Characteristics: Qualities or features of the data or dataset that describe how it behaves.Characteristics describe patterns or behaviors of the data.
A characteristic of website traffic might be:
- High bounce rate in certain countries.
- Seasonal behavior (more traffic during holidays).

Segment:A segment is a subset of data that shares common attributes based on specific conditions. Focused part of your data.
Example : slice of a pizza. ,High-value customer, Abandoned cart users

Bringing it all together with an Example
Imagine you run an online shoe store.

Metric: You measure Revenue (numerical).
Dimension: You break revenue down by Product category (e.g., sports shoes, formal shoes).
Characteristic: You notice seasonality—higher revenue in December due to holiday shopping.

Postgresql commands

Shashank Trivedi — Mon, 14 Oct 2024 16:33:09 +0000

Install postgresql
brew install postgresql@14
Start postgresql as a service
brew services start postgresql@14
Check if postgres is running
psql --version
If you don’t want PostgreSQL to run as a service, you can start it manually:
pg_ctl -D /opt/homebrew/var/postgres start
Stop the service
brew services stop postgres
Restart the service
brew services restart postgres
List all running services
brew services list
Login to postgres
psql postgres
Create User
CREATE USER app_user WITH PASSWORD app_password;
Alter role
ALTER ROLE app_user CREATE_DB;
check all users
\du
Exit using CTRL+D
Login using new user
psql postgres -u app_user
create Database
CREATE DATABASE app_database
To check all databases
\l
connect to db
\connect app_database
list all tables
\dl
check table definition
\d table_name
Once you are connected to the database, you can run the SQL script file using the following command
\i /path/to/your/script.sql
you can exit the psql interface by typing
\q

Once you're connected, you can use the COPY command to import the CSV file. The basic syntax is:
COPY table_name FROM '/path/to/your/file.csv' DELIMITER ',' CSV HEADER;

Leetcode LinkedList Questions

Shashank Trivedi — Wed, 09 Oct 2024 05:45:00 +0000

Reverse Linked List (LeetCode #206) Difficulty: Easy Concepts: Iterative and recursive approaches.
Merge Two Sorted Lists (LeetCode #21) Difficulty: Easy Concepts: Linked list traversal and merging techniques.
Remove Nth Node From End of List **(LeetCode #19) **Difficulty: Medium Concepts: Two-pointer technique (slow and fast pointer).
Linked List Cycle **(LeetCode #141) **Difficulty: Easy Problem: Detect whether a linked list contains a cycle. Concepts: Floyd’s cycle detection algorithm (tortoise and hare).
Linked List Cycle II **(LeetCode #142) **Difficulty: Medium Problem: Find the node where the cycle begins in a linked list. Concepts: Floyd’s cycle detection, meeting point of slow and fast pointers.
Add Two Numbers (LeetCode #2) Difficulty: Medium Problem: Given two non-empty linked lists representing two non-negative integers, add the two numbers. Concepts: Linked list traversal and addition with carry.
Intersection of Two Linked Lists (LeetCode #160) Difficulty: Easy Problem: Find the node at which two linked lists intersect. Concepts: Two-pointer technique and linked list lengths.
Palindrome Linked List (LeetCode #234) Difficulty: Easy Problem: Check whether a linked list is a palindrome. Concepts: Slow and fast pointer, reversing the second half of the list.
Flatten a Multilevel Doubly Linked List (LeetCode #430) Difficulty: Medium Problem: Flatten a multilevel doubly linked list. Concepts: Recursion and linked list traversal.
Sort List (LeetCode #148) Difficulty: Medium Problem: Sort a linked list in O(n log n) time and O(1) space. Concepts: Merge sort on linked lists.
Reorder List (LeetCode #143) Difficulty: Medium Problem: Reorder a linked list by alternating nodes from the start and end. Concepts: Linked list manipulation, reversing second half of the list.
Rotate List (LeetCode #61) Difficulty: Medium Problem: Rotate a linked list to the right by k places. Concepts: Length of list, rotating nodes. 13.Copy List with Random Pointer (LeetCode #138) Difficulty: Medium Problem: Deep copy of a linked list where each node has a random pointer. Concepts: HashMap or constant space cloning technique.
Swap Nodes in Pairs **(LeetCode #24) **Difficulty: Medium Problem: Swap every two adjacent nodes in a linked list. Concepts: Recursion and pointer manipulation.
Remove Duplicates from Sorted List (LeetCode #83) Difficulty: Easy Problem: Remove duplicates from a sorted linked list. Concepts: Linked list traversal and in-place modifications.
Odd Even Linked List **(LeetCode #328) **Difficulty: Medium Problem: Group all odd nodes together followed by even nodes. Concepts: Linked list rearrangement.
Reverse Nodes in k-Group **(LeetCode #25) **Difficulty: Hard Problem: Reverse nodes in groups of k at a time. Concepts: Recursion and linked list manipulation.
Split Linked List in Parts (LeetCode #725) Difficulty: Medium Problem: Split a linked list into k parts. Concepts: Linked list traversal and partitioning.

Sliding Window Questions

Shashank Trivedi — Fri, 04 Oct 2024 18:45:21 +0000

I have curated a list of leetode questions based on sliding window approach.

Any question where something is asked related to subarray, substring, consecutive element, asking max , min , longest shortest might be solved using sliding window technique

Easy Level:

Maximum Average Subarray I
Problem: Given an array, find the contiguous subarray of given length k that has the maximum average.
Longest Substring Without Repeating Characters
Problem: Find the length of the longest substring without repeating characters.
Minimum Size Subarray Sum
Problem: Find the minimal length of a contiguous subarray of which the sum is greater than or equal to a given target.
Find All Anagrams in a String
Problem: Given two strings, find all start indices of the first string's anagrams in the second string.

Medium Level:

Longest Substring with At Most Two Distinct Characters
Problem: Find the length of the longest substring that contains at most two distinct characters.
Permutation in String
Problem: Given two strings, check if one string is a permutation of the other within a sliding window of the second string.
Longest Repeating Character Replacement
Problem: Find the length of the longest substring that can be turned into the same character by replacing at most k characters.
Subarrays with K Different Integers
Problem: Find the number of subarrays with exactly k distinct integers.
Grumpy Bookstore Owner
Problem: Maximize the number of satisfied customers by applying a "non-grumpy" behavior on a contiguous window of customers.
Sliding Window Maximum
Problem: Given an array, find the maximum value in every sliding window of size k.

Hard Level:

Minimum Window Substring
Problem: Given two strings, find the minimum window in the first string that contains all characters of the second string.
Longest Substring with At Most K Distinct Characters
Problem: Find the length of the longest substring that contains at most k distinct characters.
Shortest Subarray with Sum at Least K
Problem: Find the shortest subarray with a sum of at least k.
Subarray Product Less Than K
Problem: Find the number of contiguous subarrays where the product of all elements is less than k.
Count Number of Nice Subarrays
Problem: Find the number of subarrays that contain exactly k odd numbers.

Philosophy of Redux

Shashank Trivedi — Wed, 18 Sep 2024 02:18:48 +0000

Redux is a state management library that follows a few core principles and philosophies:

Single Source of Truth:

1. In Redux, the entire application state is stored in a single object tree inside a single store. This ensures that all data is centralized, making debugging, testing, and managing the application easier.

2. This "single source of truth" also makes the application state predictable, as any state change happens through explicit actions.

State is Read-Only:
The only way to change the state in Redux is by dispatching actions. Actions are plain objects that describe "what happened" but do not directly mutate the state. The reducers, which are pure functions, handle these actions and return a new state based on the action's type and payload.

Changes are Made with Pure Functions:

Reducers are pure functions that take the current state and an action and return a new state. They must be predictable, without side effects, and always produce the same output given the same input.
This makes state transitions more predictable and easier to reason about.

Typescript unknown type

Shashank Trivedi — Tue, 17 Sep 2024 18:28:54 +0000

unknown ? ?

The unknown type in TypeScript is useful when you're dealing with a value that could be of any type but want to enforce type checking to ensure type safety before performing any operations

function processInput(input: unknown) {
  if (typeof input === "string") {
    console.log(`String input: ${input.toUpperCase()}`);
  } else if (typeof input === "number") {
    console.log(`Number input doubled: ${input * 2}`);
  } else {
    console.log('Unknown type of input');
  }
}

processInput("TypeScript"); // String input: TYPESCRIPT
processInput(21);           // Number input doubled: 42
processInput(true);         // Unknown type of input

Unknown with instanceof

class Car {
  drive() {
    console.log("Driving a car!");
  }
}

class Bike {
  pedal() {
    console.log("Pedaling a bike!");
  }
}

function useVehicle(vehicle: unknown) {
  if (vehicle instanceof Car) {
    vehicle.drive(); // Safe to call 'drive' method
  } else if (vehicle instanceof Bike) {
    vehicle.pedal(); // Safe to call 'pedal' method
  } else {
    console.log("Unknown vehicle");
  }
}

useVehicle(new Car());  // Driving a car!
useVehicle(new Bike()); // Pedaling a bike!
useVehicle({});         // Unknown vehicle

Unknown or any

The unknown type in TypeScript is generally considered safer and more strict than the any type. While both unknown and any type can be used to represent values of any type, the key difference lies in how they enforce type safety.
You must perform a type check before performing operations on values of type unknown. Where as you can perform any operation on an any type value without type checking. This leads to potential runtime errors because TypeScript won't alert you to type issues.
unknown: Forces you to think about type safety. If you attempt to use an unknown value without narrowing it first, TypeScript will show an error, ensuring you're handling the value correctly. any Allows you to bypass type checks, meaning you can call methods that may not exist on a value. This could lead to runtime errors that are difficult to track down.

unknown or Generics

Use Generics when:

You want flexibility but expect the same type throughout the function, class, or structure.
You want TypeScript to enforce that the input and output types match or relate in a certain way.
You’re working with reusable components (like functions, classes, or interfaces) that should adapt to multiple types without losing type safety.
For example, if you’re creating a utility function like identity(value: T): T, generics ensure that whatever type you pass in is the same type returned, making it type-safe and flexible.

Use unknown when:

You're dealing with dynamic or untrusted data where the exact type is completely uncertain at the time of writing, and you need to enforce checks at runtime.
You don't want to assume the type and need explicit runtime checks before doing any operations on the data.
You're working with data from external sources such as APIs, user input, or libraries, where type information isn't known upfront.

Jenkins CI/CD implementation in React + Node Application

Shashank Trivedi — Tue, 17 Sep 2024 05:44:44 +0000

Step-1: Install jenkins on server (Virtual machine)

Install Jenkins on your server (e.g., cloud VM or local machine). This could be through Docker, AWS EC2, or another platform.

brew install jenkins-lts

Choose the default plugin while installing.

Once Jenkins is installed you can access it via http://your_server_ip:8080

Step-2: Install Plugins

Goto Manage Jenkins -> plugin ->search
Search & install GitHub Integration Plugin
Search & install Node.js Plugin

Step-3: Create Job for Backend (Node Js)

Go to "New Item" in Jenkins, select "Pipeline type", and name it something like node-backend-ci.
Pipeline Configuration:
Choose "Pipeline script from SCM".
Select "Git" and enter the repository URL of your GitHub repository.
Add the credentials (your GitHub token) to connect Jenkins to your repository.
_In the pipeline script section, create a Jenkinsfile to automate the steps: follow the sample file given below _

pipeline {
  agent any
  environment {
    NODE_ENV = 'production'
  }
  stages {
    stage('Checkout') {
      steps {
        // Clone the repository
        git branch: 'main', url: 'https://github.com/your-repo-url.git'
      }
    }
    stage('Install Dependencies') {
      steps {
        sh 'cd backend && npm install'
      }
    }
    stage('Run Tests') {
      steps {
        sh 'cd backend && npm test'
      }
    }
    stage('Build') {
      steps {
        sh 'cd backend && npm run build'
      }
    }
    stage('Deploy') {
      steps {
        // Deployment script or commands, e.g., using SCP, Docker, AWS CLI
        sh 'scp -r backend/* user@your-server:/var/www/backend'
      }
    }
  }
}

Step-4: Create Job for Frontend

Go to "New Item", select “Pipeline” type, and name it react-frontend-ci

Pipeline Configuration:

Follow similar steps as for the backend, but focus on the frontend directory.
Create another Jenkinsfile to automate the frontend build and deployment process: follow the sample file

pipeline {
  agent any
  environment {
    NODE_ENV = 'production'
  }
  stages {
    stage('Checkout') {
      steps {
        git branch: 'main', url: 'https://github.com/your-repo-url.git'
      }
    }
    stage('Install Dependencies') {
      steps {
        sh 'cd frontend && npm install'
      }
    }
    stage('Run Tests') {
      steps {
        sh 'cd frontend && npm test'
      }
    }
    stage('Build') {
      steps {
        sh 'cd frontend && npm run build'
      }
    }
    stage('Deploy') {
      steps {
        // Deploying static assets, for example, to an S3 bucket, or web server
        sh 'scp -r frontend/build/* user@your-server:/var/www/frontend'
      }
    }
  }
}

Step 5: Webhooks and Automation with GitHub

Go to your GitHub repository settings, and under Webhooks, add a new webhook with the Jenkins server URL in this format:

bash
http://your-server-ip:8080/github-webhook/

Select the trigger events (e.g., push, pull requests) that will cause Jenkins to start the build automatically.

Step 6: Jenkins Github trigger

In each of your Jenkins jobs, go to “Build Triggers” and enable GitHub hook trigger for GITScm polling. This ensures Jenkins listens for changes from GitHub and runs the pipelines when there are new commits or pull requests.

Step 7: Deployment Strategy

Depending on your infrastructure, you can deploy in different ways:

For Static Assets (React Frontend):

If your app is static (after running npm run build), you can deploy it to:_

AWS S3 (for static site hosting)
FTP or SCP to a web server
Netlify or Vercel (these platforms can handle React app deployments easily).

For Backend (Node.js):

1._ SSH/SCP: Transfer files to the server and restart the application (use PM2 or a similar tool to manage Node.js processes)._

Docker: Build Docker images as part of the pipeline, and push them to Docker Hub or a private registry, then deploy using Docker Compose or Kubernetes.

Example of Docker Integration:

stage('Build Docker Image') {
  steps {
    sh 'cd backend && docker build -t your-backend-image:latest .'
    sh 'docker push your-docker-registry/your-backend-image:latest'
  }
}
stage('Deploy Docker Container') {
  steps {
    // On your server, run docker commands to pull and restart containers
    sh 'ssh user@your-server "docker pull your-backend-image:latest && docker-compose up -d"'
  }
}

Step 8: Notifications and Feedback

Slack/Email Notifications:

Use Jenkins plugins like Email Extension or Slack Notification to send build status (success or failure) to your team. Configure these in the "Post-build Actions" section of the Jenkins job configuration.
Monitoring:
Monitor builds in Jenkins. Failed builds will show up as red, and you can set up thresholds for retries or to stop builds if too many fail.

This setup ensures that every time you commit or push changes to GitHub, Jenkins will automatically trigger the build, run tests, and deploy your application.

Webpack 5 series part-4

Shashank Trivedi — Sun, 15 Sep 2024 09:10:19 +0000

Please look for the other parts of the series to fully understand the concept.
Webpack 5 series part-1
Webpack 5 series part-2
Webpack 5 series part-3

Shared state management in Microfrontend

In a micro-frontend architecture, managing shared state between multiple micro-frontends can be challenging, but it can be done in a few ways.

Using a Shared State Library (Global State)

Redux / Zustand / Recoil: These libraries allow you to manage a global state that can be shared across multiple micro-frontends. You can create a separate micro-frontend responsible for managing the global state (like a store), and expose that state using Webpack's Module Federation.
With Module Federation, you can share libraries like Redux between micro-frontends. You need to ensure that the global store is accessible to all the micro-frontends that need to share state.

new ModuleFederationPlugin({
  name: 'app1',
  remotes: {
    store: 'store@http://localhost:3001/remoteEntry.js'
  },
  shared: ['react', 'react-dom', 'redux'],
})

Custom Event System or Event Bus

Use an event-driven architecture where micro-frontends communicate by dispatching and listening to events (custom events). This is a decoupled approach and prevents tight coupling between micro-frontends.
You can implement this using JavaScript's CustomEvent or a more sophisticated event bus.

const event = new CustomEvent('sharedStateChange', { detail: { data } });
window.dispatchEvent(event);

window.addEventListener('sharedStateChange', (event) => {
  console.log('Received data:', event.detail.data);
});

Context API with Module Federation

If you are using React, you can use the Context API to manage shared state across micro-frontends. One micro-frontend can provide a context, and others can consume it.

Example:

Provider Micro-frontend: Provide the context and expose it using Module Federation.
Consumer Micro-frontend: Import the exposed context and consume it.

Shared Services or APIs

Have a centralized API or service layer that all micro-frontends can communicate with to get or update shared state. This can be a service in a backend or an in-browser shared state service.

For example, you could implement a simple shared service like this:

class SharedStateService {
  constructor() {
    this.state = {};
    this.subscribers = [];
  }

  getState() {
    return this.state;
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.notifySubscribers();
  }

  subscribe(callback) {
    this.subscribers.push(callback);
  }

  notifySubscribers() {
    this.subscribers.forEach(callback => callback(this.state));
  }
}

const sharedService = new SharedStateService();
export default sharedService;

All micro-frontends would import this service and subscribe to state changes.

LocalStorage / SessionStorage

For less complex or smaller-scale use cases, LocalStorage or SessionStorage can be used to persist shared data across micro-frontends. When one micro-frontend updates the state in LocalStorage, the others can read from it.
This approach works well if you need to persist the state temporarily or across page reloads but can become cumbersome with more complex applications.

Tips for Working with Micro-Frontends:

Avoid Global State When Possible: Keep state local to each micro-frontend when possible to reduce coupling.
Use Well-defined Interfaces: Define clear contracts between micro-frontends to avoid unexpected behaviors.
Lazy Loading: Use lazy loading for shared dependencies to improve performance.
Versioning and Compatibility: Ensure that shared dependencies are versioned correctly to avoid conflicts between micro-frontends.
Isolation: Each micro-frontend should be as isolated as possible (style, state, logic) to avoid side effects across different parts of the app.

DEV Community: Shashank Trivedi

Hands-On Workshop: Refactoring Anti-Patterns

Exercise 1: Spot the Anti-Patterns (20 minutes)

Instructions

Code Snippet A: User Dashboard

Exercise 2: Refactor the God Component (30 minutes)

Your Task

Step-by-Step Guide

Exercise 3: Eliminate Magic Numbers (15 minutes)

Code to Refactor

Your Task

Exercise 4: Replace Switch Statement (15 minutes)

Code to Refactor

Your Task

Exercise 5: Fix Prop Drilling (20 minutes)

Code to Refactor

Your Task

Exercise 6: Improve Error Handling (20 minutes)

Code to Refactor

Your Task

Bonus Exercise: Real Codebase Refactoring (30+ minutes)

Task

Checklist

Workshop Wrap-up

Group Discussion (20 minutes)

Action Items

Additional Resources

Practice Repos

Reading

Tools

Feedback Form

Code Anti-Patterns and Best Practices Guide

Code Anti-Patterns and Best Practices Guide (Conceptual Edition)

1. Switch / If-Else Ladders

❌ Anti-Pattern

✅ Better Pattern: Lookup Strategy

2. Magic Numbers and Strings

❌ Anti-Pattern

✅ Better Pattern

3. Code Duplication

❌ Anti-Pattern

✅ Better Pattern

4. Redundant State

❌ Anti-Pattern

✅ Better Pattern

5. Long Parameter Lists

❌ Anti-Pattern

✅ Better Pattern

6. Inline Styles Everywhere

❌ Anti-Pattern

✅ Better Pattern

7. Scattered Filter Logic

❌ Anti-Pattern

✅ Better Pattern

8. any Type Abuse

❌ Anti-Pattern

✅ Better Pattern

9. Prop Drilling

❌ Anti-Pattern

✅ Better Pattern

10. God Components

❌ Anti-Pattern

✅ Better Pattern

11. Premature Optimization

❌ Anti-Pattern

✅ Better Pattern

12. Poor Error Handling

❌ Anti-Pattern

✅ Better Pattern

Summary Checklist

React - Quick Revision

Prisma ORM

Key terms In data analytics

Postgresql commands

Leetcode LinkedList Questions

Sliding Window Questions

Easy Level:

Medium Level:

Hard Level:

Philosophy of Redux

8. `any` Type Abuse