Home/ Questions/Q 493
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

What are the best practices for React architecture?

  • 0
  • 0

An explanation of React architecture best practices.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Amelia Edwards

    React is a powerful library for building user interfaces, but to write maintainable and scalable code, it’s important to follow some best practices. Below are some key principles and examples to help you get started.

    1. Component Structure

    • Break your UI into small, reusable components.
    • Follow the Single Responsibility Principle: Each component should do one thing well.

    Example:

    // Header.js (Reusable Header Component)
const Header = ({ title }) => {
  return <h1>{title}</h1>;
};

export default Header;

// App.js (Main Component)
import Header from './Header';

function App() {
  return (
    <div>
      <Header title="Welcome to My App" />
      <p>This is the main content.</p>
    </div>
  );
}

export default App;

    2. Folder Structure

    • Organize your files and folders logically.
    • A common structure is:
      Copy
      src/
├── components/  # Reusable components
├── pages/       # Page-level components
├── assets/      # Images, fonts, etc.
├── styles/      # CSS or SCSS files
├── utils/       # Utility functions
└── App.js       # Main application component

    3. Props and State

    • Use props to pass data from parent to child components.
    • Use state to manage data that changes over time within a component.

    Example:

    // Counter.js
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

    4. Avoid Prop Drilling

    • If you need to pass props through many levels, use Context API or a state management library like Redux.

    Example with Context API:

    // ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

export default App;

// ThemedButton.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemedButton = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      style={{
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      Toggle Theme
    </button>
  );
};

export default ThemedButton;

    5. Use Functional Components and Hooks

    • Prefer functional components over class components.
    • Use hooks like useState, useEffect, and useContext for state and side effects.

    Example:

    import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return <p>Seconds: {seconds}</p>;
};

export default Timer;

    6. Keep Components Pure

    • Avoid side effects (e.g., API calls, DOM manipulation) in render methods.
    • Use useEffect for side effects.

    Example:

    import React, { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

    7. Use Keys in Lists

    • Always use a unique key prop when rendering lists to help React identify which items have changed.

    Example:

    const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

    8. Avoid Inline Styles

    • Use CSS or CSS-in-JS libraries (e.g., styled-components) instead of inline styles.

    Example with CSS:

    /* Button.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
    // Button.js
import React from 'react';
import './Button.css';

const Button = ({ onClick, children }) => {
  return (
    <button className="button" onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

    9. Testing

    • Write tests for your components using tools like Jest and React Testing Library.

    Example:

    // Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders a button with text', () => {
  render(<Button onClick={() => {}}>Click Me</Button>);
  expect(screen.getByText('Click Me')).toBeInTheDocument();
});

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me</Button>);
  fireEvent.click(screen.getByText('Click Me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

    10. Code Splitting

    • Use React.lazy and Suspense to load components only when needed.

    Example:

    import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

    Summary of Best Practices:

    1. Break UI into small, reusable components.
    2. Organize files and folders logically.
    3. Use props and state effectively.
    4. Avoid prop drilling with Context API or Redux.
    5. Prefer functional components and hooks.
    6. Keep components pure and handle side effects in useEffect.
    7. Use keys in lists.
    8. Avoid inline styles; use CSS or CSS-in-JS.
    9. Write tests for your components.
    10. Use code splitting for better performance.