Where to write business logic in React: separation of concers for Frontend Interviews

Note: We are creating FrontSage to help you ace your frontend-interviews. Subscription to the waiting list are now open, limited spots are available, give it a look!

What are the benefits of isolating business logic from UI components in React?

• Enhanced Code Reusability: Facilitates component reusability across various application sections and different projects.
• Simplified Testing: Enables independent testing of business logic, bolstering test coverage and code quality.
• Improved Readability and Maintainability: Results in more readable and maintainable code, clarifying each application part’s role.
• Scalability: Supports application growth, allowing simultaneous development on different codebase sections without conflicts.

A pratical approach to business logic isolation

Identify Business Logic: The first important step is to pinpoint the component sections managing data, state, or API interactions.

Develop Custom Hooks: you can then encapsulate the identified business logic inside custom hooks.

import { useState, useEffect } from 'react';

function useBusinessLogic() {
  const [state, setState] = useState(initialState);
  // Business logic here
  
  useEffect(() => {
    // Side effects or cleanup
  }, [dependencies]);
  
  return state;
}

Integrate Custom Hooks inside Components: your business logic hook can now be employed inside your components.

import React from 'react';
import { useBusinessLogic } from './useBusinessLogic';

function UIComponent() {
  const state = useBusinessLogic();
  return (
    <div>
      {/* Render UI based on state */}
    </div>
  );
}

Code Split your code with Suspense: Utilize Suspense for lazy loading and handling asynchronous operations this will greatly enhance your application performance.

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

Strategies for Business Logic Isolation in React 18 Beyond the basics

So far we have seen some basic examples of how you can isolate your business logic, here is some ideas of how you can keep your code clean while your codebase is growing in size:

Composing Custom Hooks: Combine multiple custom hooks to develop intricate business logic while maintaining clean UI components.

import { useHook1 } from './useHook1';
import { useHook2 } from './useHook2';

function useCompositeHook() {
  const data1 = useHook1();
  const data2 = useHook2();
  // Combine or manipulate data1 and data2
  return combinedData;
}

Custom Hooks for Side Effects: Manage side effects like timers or external API interactions consistently across components using custom hooks.

import { useState, useEffect } from 'react';

function useTimer() {
  const [time, setTime] = useState(0);
  
  useEffect(() => {
    const intervalId = setInterval(() => setTime(time + 1), 1000);
    return () => clearInterval(intervalId);
  }, [time]);
  
  return time;
}

Utilizing Context for Global State: The Context API in React 18 facilitates sharing state across multiple components, avoiding prop drilling.

import React, { createContext, useContext, useState } from 'react';

const GlobalStateContext = createContext();

export function GlobalStateProvider({ children }) {
  const [state, setState] = useState(initialState);
  return (
    <GlobalStateContext.Provider value={[state, setState]}>
      {children}
    </GlobalStateContext.Provider>
  );
}

export function useGlobalState() {
  return useContext(GlobalStateContext);
}

Employing Higher-Order Components (HOCs): HOCs can be used for applying shared logic across multiple components, enhancing code reusability.

Also you can read more about HoC’s in one of my previous article

function withEnhancements(Component) {
  return function EnhancedComponent(props) {
    // Enhancements or additional props
    return <Component {...props} />;
  };
}

How This Knowledge Translates to Frontend Interviews

Mastering the skill of separating the business logic from UI components, can significally increase your performance in frontend interviews. Often you will be asked how you would write clean, maintenable and scalable code, you will need to demostrate a deep understanding of React’s features and how to leverage them for business logic isolation, this will demostrate your commitment to code quality and your knowledge of best practices. This guide is a simple starting point on the topic, but you should really consider understanding SOLID principle and clean code architecture, you can find a lot on this online but take some time for this geekforgeeks article.

In practical terms, during an interview, you might be asked to:

• Refactor a Component: You could be given a React component and asked to refactor it to separate business logic, demonstrating your understanding of custom hooks and other React features.
• Solve a Real-World Problem: Interviewers might present a real-world problem and assess how you’d architect a solution using React, observing if you apply separation of concerns.
• Optimize Application Performance: Knowing how to use features like Suspense for lazy loading showcases your knowledge in optimizing React applications, a valuable skill in frontend development.

For more insightful content and to master frontend interviews, explore our comprehensive resource at FrontSage. Stay tuned for more exercises in this series, and let’s continue our journey towards frontend mastery together!