Reasons for Advocating Functional Programming in React

Choose theme

기록 상세 정보를 불러오는 중입니다.

아티클을 불러오는 중입니다.

Reasons for Advocating Functional Programming in React | chaen

React has been leaning towards Functional Programming (FP) in recent years.
It actively leverages the advantages of functional approaches from simple UI components to complex application structures.
In this article, we will systematically organize the reasons and grounds for advocating functional programming in React.

👍 Ease of Testing

The core of functional programming is the 'pure function'. A pure function is a function that always produces the same output for the same input and does not alter external state.

Testing Advantages of Functional Components

Minimized Dependencies: If a component does not rely on external state or side effects, the outcome of that component can be predicted solely by its input (props).
Optimized Unit Testing: The need for mocks or stubs is often reduced, making test code shorter and easier to understand.
Enhanced Reusability: Hooks or functional helpers can be independently utilized across multiple components.

Concise Example Comparison

Class Component Testing:

js

Functional Component:

js

Functional components allow for separation of logic and rendering, enabling independent testing.

Example of Pure Function:

js

👍 Convenience of Optimization

In functional programming, data is handled immutably by default.

Core Principles of Immutability

State Management Immutability: Instead of directly modifying existing objects, create new objects to change the state.
Reference Comparison Efficiency (Shallow Compare): Optimization is easy because only object references are compared.
Predictability: Maintains a predictable flow as values do not change.

Why Optimization Becomes Easier

When immutability is maintained, React's optimization tools function very effectively:

Efficient Operation of React.memo:

js

Accurate Dependency Detection with useMemo and useCallback:

js

Wrong Method vs Correct Method:

js

👍 Efficiency in Change Detection

By maintaining immutability, state change detection is possible using only reference comparison («===»).

Performance Benefits of Reference Comparison

Deep Comparison vs Reference Comparison:

js

React's Change Detection Mechanism

React uses Object.is() (almost identical to «===») when confirming whether a state has changed:

js

Efficiency with Large Data

js

By maintaining immutability like this, change detection in complex data structures occurs in O(1) time, providing significant performance benefits.

👍 Relationship Between Memoization and Functional Programming

Memoization is an optimization technique that returns cached values instead of recalculating them for the same input. Functional programming assumes pure functions, making memoization highly effective.

Why It Fits Well with Functional Programming

Pure functions always return the same output for the same input → Optimal for caching
No side effects, allowing reuse of cached results without issues
Concepts like and hooks are based on this idea

Example - useMemo Optimization

js

Difficult to Memoize Non-Pure Functions:

js

This way, the "immutability + purity" of functional programming aligns with the prerequisites of memoization, strengthening both concepts.

👍 State Management and Readability

By using functional components and Hooks (useState, useReducer), state management code becomes succinct.

Handling Complex Logic with useReducer

js

Separating Logic with Custom Hooks

js

By doing so, UI rendering logic and data logic can be clearly separated, improving readability.

📌 Conclusion

The reason React adopts functional programming is due to clarity of code, ease of testing, optimization, and efficiency in change detection.

Writing test code becomes easier - Pure functions require only input and output verification
State management becomes intuitive - Separation and reuse of logic through Hooks
Performance optimization is predictable - Reference comparison based on immutability

The functional paradigm is an effective strategy for modularizing components and controlling complexity.

💭 Choosing Paradigms for Frontend vs Backend

This is my subjective judgment

Frontend (React) seems suitable for efficiently handling UI rendering, state change detection, optimization, and testing with the functional paradigm.

Purity + Immutability → Favorable for state tracking and controlling re-rendering

On the other hand, Backend (Node.js, Java, etc.) is considered practical with object-oriented programming (OOP) for performance issues, resource management, and process flow control.

When creating data flows based on pure functions, complexity can increase more than performance

Category	Frontend (React, etc.)	Backend (Node.js, Java, etc.)
Key Considerations	UI Rendering Optimization, State Change Tracking	Performance, Resource Management, Transaction Flow
Suitable Paradigm	Functional Programming	Object-Oriented Programming
Advantages	Easy Testing, State Change Tracking with Immutability, Component Reusability	Clearly Defined Responsibilities with Class-Based Structure, State Maintenance, Connection-Centric Design, Ease of Structuring Complex Logic
Disadvantages	Inconvenient for Complex Flow Operations, Readability Decreases with Indiscriminate Hook Usage	Difficult to Separate State during Testing, Complex Re-Rendering Optimization Structure

References

React Official Documentation: Function Components

class UserProfile extends React.Component {
  state = { name: '', loading: false };
  
  async componentDidMount() {
    this.setState({ loading: true });
    const user = await fetchUser(this.props.userId);
    this.setState({ name: user.name, loading: false });
  }
  
  render() {
    return <div>{this.state.loading ? 'Loading...' : this.state.name}</div>;
  }
}
 
// Must consider lifecycle and state during testing

function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);
  
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}
 
// Only need to check props during testing (Hook is tested separately)

function formatPrice(price, currency = 'USD') {
  return `${currency} ${price.toFixed(2)}`;
}
 
// Predictable results based on input
expect(formatPrice(10.5)).toBe('USD 10.50');
expect(formatPrice(20, 'KRW')).toBe('KRW 20.00');

// When maintaining immutability
const TodoItem = React.memo(({ todo, onToggle }) => (
  <div onClick={() => onToggle(todo.id)}>
    {todo.text} {todo.completed ? '✓' : '○'}
  </div>
));
 
// No re-rendering if props have the same reference

function TodoList({ todos, filter }) {
  // Re-execute filtering only when the todos array is newly created
  const filteredTodos = useMemo(() => 
    todos.filter(todo => todo.category === filter), 
    [todos, filter]
  );
  
  // No function re-creation if dependencies do not change
  const handleToggle = useCallback((id) => 
    setTodos(prev => prev.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )), 
    []
  );
  
  return <div>{/* ... */}</div>;
}

// ❌ Direct modification - Optimization tools cannot detect changes
function badUpdate() {
  const newTodos = todos;
  newTodos[0].completed = true;
  setTodos(newTodos); // No re-rendering because the reference is the same
}
 
// ✅ Creating new objects - Optimization tools work accurately
function goodUpdate() {
  setTodos(prev => prev.map((todo, index) => 
    index === 0 ? { ...todo, completed: true } : todo
  ));
}

// ❌ Deep Comparison - Checks all properties recursively (slow)
function deepEqual(obj1, obj2) {
  // Must compare all key-values of the object
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}
 
// ✅ Reference Comparison - Only checks memory addresses (fast)
function shallowEqual(obj1, obj2) {
  return obj1 === obj2; // Ends with a single comparison
}

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John', age: 25 });
  
  // ✅ Primitives automatically ensure immutability
  const increment = () => setCount(prev => prev + 1);
  
  // ✅ Objects must be newly created to detect changes
  const updateAge = () => setUser(prev => ({ ...prev, age: prev.age + 1 }));
  
  // ❌ This way changes are not detected
  const wrongUpdate = () => {
    user.age += 1;
    setUser(user); // No re-rendering because it is the same reference
  };
}

function DataTable({ items }) {
  // No re-sorting if items have the same reference
  const sortedItems = useMemo(() => {
    console.log('Sorting executed!'); // Check when it executes
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);
  
  return (
    <table>
     {sortedItems.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.price}</td>
        </tr>
      ))}
    </table>
  );
}

function ProductList({ products, searchTerm }) {
  // Does not refilter if searchTerm or products have not changed
  const filteredProducts = useMemo(() => {
    console.log('Executing filter!');
    return products.filter(p => 
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]);
  
  return <div>{filteredProducts.map(/* ... */)}</div>;
}

// ❌ Not pure - depends on external state
let discount = 0.1;
function calculatePrice(price) {
  return price * (1 - discount); // References external variable
}
 
// ✅ Pure - all inputs are passed as parameters
function calculatePrice(price, discount = 0) {
  return price * (1 - discount);
}

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo => 
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return state;
  }
}
 
function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  
  return (
    <div>
      <button onClick={() => dispatch({ type: 'ADD_TODO', text: 'New Todo' })}>
        Add Todo
      </button>
      {/* ... */}
    </div>
  );
}

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}
 
// Can be reused in multiple components
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [language, setLanguage] = useLocalStorage('language', 'ko');
  
  return <div>{/* Settings UI */}</div>;
}

Reasons for Advocating Functional Programming in React

Comments

NAVER Boostcamp Web·Mobile 10 Membership — Group Project Weeks 4-7 Retrospective

Frontend UI Architecture Patterns — MVC, MVP, MVVM, Flux

👍 Ease of Testing

Testing Advantages of Functional Components

Concise Example Comparison

👍 Convenience of Optimization

Core Principles of Immutability

Why Optimization Becomes Easier

👍 Efficiency in Change Detection

Performance Benefits of Reference Comparison

React's Change Detection Mechanism

Efficiency with Large Data

👍 Relationship Between Memoization and Functional Programming

Why It Fits Well with Functional Programming

Example - useMemo Optimization

👍 State Management and Readability

Handling Complex Logic with useReducer

Separating Logic with Custom Hooks

📌 Conclusion

💭 Choosing Paradigms for Frontend vs Backend

References

NAVER Boostcamp Web·Mobile 10 Membership — Group Project Weeks 4-7 Retrospective

Frontend UI Architecture Patterns — MVC, MVP, MVVM, Flux

Comments

관련 기록

NAVER Boostcamp Web·Mobile 10 Membership — Group Project Weeks 4-7 Retrospective

Frontend UI Architecture Patterns — MVC, MVP, MVVM, Flux

👍 Ease of Testing

Testing Advantages of Functional Components

Concise Example Comparison

👍 Convenience of Optimization

Core Principles of Immutability

Why Optimization Becomes Easier

👍 Efficiency in Change Detection

Performance Benefits of Reference Comparison

React's Change Detection Mechanism

Efficiency with Large Data

👍 Relationship Between Memoization and Functional Programming

Why It Fits Well with Functional Programming

Example - useMemo Optimization

👍 State Management and Readability

Handling Complex Logic with useReducer

Separating Logic with Custom Hooks

📌 Conclusion

💭 Choosing Paradigms for Frontend vs Backend

References

관련 기록

NAVER Boostcamp Web·Mobile 10 Membership — Group Project Weeks 4-7 Retrospective

Frontend UI Architecture Patterns — MVC, MVP, MVVM, Flux