useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    try {
      const response = await fetch(`/api/data?query=${query}`, {
        signal: controller.signal,
      });
      const result = await response.json();
      setData(result);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('API Error:', err);
      }
    }
  };
  fetchData();
  return () => {
    controller.abort(); // Cancels the previous request
  };
}, [query]);

The post How do you Handle Race Conditions in API Calls? appeared first on CMARIX QandA.

What are the Avoidance Strategies of Context API pitfall?

Split Contexts: Create smaller, more focused contexts instead of one large global context. Components subscribe only to the context they need.

Memoize the Context Value:

Wrap the value object passed to the Provider in useMemo (and memoize functions within it using useCallback) so its reference only changes when its actual contents change.

Use Libraries with Selectors:

State management libraries (Zustand, Jotai) or use-context-selector allow components to subscribe only to specific slices of the context state.

Problem: Every consuming component re-renders when any value in context changes.

Fix:

• Split contexts (AuthContext, ThemeContext)
• Use memoization:

Example:

// AuthProvider.js
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const logout = () => { /* logout logic */ };
  const value = useMemo(() => ({ user, logout }), [user]);
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
};

The post What is the Context API pitfall and how do you avoid it? appeared first on CMARIX QandA.

• Code Splitting: Load code on demand (route-based or component-based) using React.lazy and Suspense.
• Memoization: Prevent unnecessary re-renders using React.memo, useMemo, useCallback.
• Bundle Analysis: Use tools (webpack-bundle-analyzer) to find large dependencies.
• Tree Shaking: Ensure unused code is removed by the bundler.
• Virtualization: Render only visible items in long lists/tables (react-window).
• Optimize Context: Split contexts, memoize values to avoid excessive re-renders.
• SSR/SSG: Improve initial load time with server-side rendering or static generation.
• Profiling: Use React DevTools Profiler to find bottlenecks.

Simplified Example (React.memo):

import React from 'react';
// Assume UserProfile makes an expensive calculation or renders complex UI
function UserProfile({ user }) {
  console.log(`Rendering profile for ${user.name}`);
  // ... complex rendering ...
  return <div>{user.name}</div>;
}
// Memoize the component: It will only re-render if the 'user' prop changes reference or value.
const MemoizedUserProfile = React.memo(UserProfile);
// Usage: <MemoizedUserProfile user={currentUser} />

The post How Do You Optimize Large React App? appeared first on CMARIX QandA.

/* styles.module.css */
.button {
  background-color: red;
}
import styles from './styles.module.css';
<button className={styles.button}>Click</button>

The post What are CSS Modules in React? appeared first on CMARIX QandA.

They use static getDerivedStateFromError() to update state and trigger a fallback UI render, and componentDidCatch() for side effects like logging errors. They do not catch errors in event handlers, async code, SSR, or themselves.

Simplified Example (Class Component):

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error("ErrorBoundary caught:", error, info);
  }
  render() {
    return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children;
  }
}


// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

The post Explain Error Boundary and How to Create One appeared first on CMARIX QandA.

 What are the Features of Persist specific Redux Slices to localStorage?

• Handles serialization/deserialization.
• Supports various storage engines.
• Allows whitelisting/blacklisting specific slices.
• Provides transforms and migrations.

Simplified Example (redux-persist Config):

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage
import rootReducer from './reducers'; // Your combined reducers
const persistConfig = {
  key: 'root',        // Key in localStorage
  storage,            // Storage engine
  whitelist: ['auth', 'cart'] // ONLY persist these slices
  // blacklist: ['tempData'] // OR persist everything EXCEPT these
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
// Configure store with persisted reducer
const store = configureStore({
  reducer: persistedReducer,
  // Middleware setup needed to ignore redux-persist actions
});
const persistor = persistStore(store);
// Wrap app in <PersistGate loading={null} persistor={persistor}> in index.js

The post How would You Persist Specific Redux Slices to localStorage? appeared first on CMARIX QandA.

Modern Redux Toolkit (RTK) Approaches:

1. Chain  Dispatch a second thunk from within the first thunk’s payloadCreator after the first API call succeeds. Good for linear dependencies.
2. RTK Query: Define endpoints using createApi. Use query hooks in components. The second query hook can use the skip option to wait until data from the first query (e.g., a user ID) is available. Often the cleanest approach for API data fetching.

Use createAsyncThunk chaining:

export const fetchUserAndOrders = createAsyncThunk(
  'user/fetchUserAndOrders',
  async (userId, { dispatch }) => {
    const user = await fetch(`/api/users/${userId}`).then(res => res.json());
    await dispatch(fetchOrders(user.id));
    return user;
  }
);

The post How Would You Handle Dependent API Calls in Redux? appeared first on CMARIX QandA.

Few Key Techniques a Huge Data Table in React:

1. Virtualization: Use libraries like react-window, react-virtualized, or @tanstack/react-virtual.
2. Memoization: Use React.memo on row components to prevent re-renders if props haven’t changed.
3. Debounce/Throttle: For filtering/sorting inputs.

Server-Side Operations: For truly massive datasets, fetch data in pages/chunks (pagination/infinite scroll) instead of loading all data client-side.

Simplified Example: react-window

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<List height={500} itemCount={10000} itemSize={35} width={300}>
  {Row}
</List>

Other Tips:

• Debounce filters
• Use React.memo
• Avoid unnecessary re-renders

The post How Do you Optimize a Huge Data Table in React? appeared first on CMARIX QandA.

Break work into chunks: Rendering isn’t one monolithic task.

• Prioritize updates: High-priority work (like user input) can interrupt low-priority work (like rendering offscreen elements).
• Pause, resume, or abort work: Makes rendering flexible and non-blocking.
• This results in a smoother, more responsive UI, especially during complex updates, and enables concurrent features.
• Simplified Example (Conceptual Benefit):
• Fiber allows React to handle a user typing into an input field immediately, even if a large list is currently trying to re-render in the background due to a data update. The list rendering gets paused, the input is processed, and then the list rendering resumes.

The post Explain the Fiber Architecture and How it Improves React’s Rendering Process? appeared first on CMARIX QandA.

Methods:

• Filter Configuration Array: Preferred for dynamic lists.
• Conditional Rendering: Use && or ternary operators based on permission checks.
• Higher-Order Component (HOC): Wrap components with a permission-checking HOC.

Simplified Example (Filtering Config):

// Assume:
// userPermissions = ['view_sales', 'edit_users'];
// allWidgets = [
//   { id: 'sales', component: Sales, permission: 'view_sales' },
//   { id: 'users', component: Users, permission: 'edit_users' },
//   { id: 'admin', component: Admin, permission: 'admin_only' },
// ];

const authorizedWidgets = allWidgets.filter(widget =>
  !widget.permission || userPermissions.includes(widget.permission)
);

// Then render:
// {authorizedWidgets.map(widget => <widget.component key={widget.id} />)}

The post How Do You Handle Unauthorized Widget Components In The Dashboard Config? appeared first on CMARIX QandA.