Functional components vs Class components

[nbwedev]

Explain what is functional, class components and its use cases.

[nbwedev]

Functional components are the standard way to write React components.
JSX is just JavaScript syntax and can be used anywhere in a component.
Application logic should live in plain JavaScript functions outside components, not in class components

You should NOT use class components for “JavaScript logic” and functional components for JSX.

Rule of thumb (lock this in)

Functions for logic. Components for coordination and rendering.

---

Class vs Function is about component model, not syntax

The real distinction is:

Aspect	Class Component	Function Component
How state is handled	this.state, setState	useState, hooks
Lifecycle	Lifecycle methods	Hooks (useEffect)
this binding	Required	Not needed
Modern usage	Legacy	Recommended

Correct split (what senior engineers do)

Responsibility	Location
Business logic	Plain JS functions (no React)
Data manipulation	Utility / service functions
State orchestration	Function components
Rendering	JSX inside function components

---

Concrete example (task manager)

Business logic (framework-agnostic)

// taskService.js
export function toggleTask(tasks, taskId) {
  return tasks.map(task =>
    task.id === taskId
      ? { ...task, isCompleted: !task.isCompleted }
      : task
  );
}

No JSX. No React. Pure JavaScript.

---

Functional component (React)

function TaskList() {
  const [tasks, setTasks] = useState([]);

  const handleToggle = (id) => {
    setTasks(prev => toggleTask(prev, id));
  };

  return (
    <>
      {tasks.map(task => (
        <TaskItem
          key={task.id}
          task={task}
          onToggle={handleToggle}
        />
      ))}
    </>
  );
}

. Logic is imported
. Component coordinates
. JSX renders

This is the clean separation you want.