Mastering React Hooks with TypeScript: Simulating Cellular Behavior in a Functional Component

Mastering React Hooks with TypeScript: Simulating Cellular Behavior in a Functional Component

In modern React development, hooks are the cornerstone of interactivity, stateful logic, and side-effect management—without relying on class components. React's built-in hooks let us express complex behavior with elegance and modularity.

In this article, we’ll explore React Hooks through a biological lens: we’ll simulate the behavior of a cell with dynamic properties such as energy levels, metabolism, and lifecycle events—all using React functional components and TypeScript.

What Are React Hooks?

Hooks are special functions that let you “hook into” React features like state and lifecycle without writing a class. They are the foundation of modern React development and make component logic composable and reusable.

Types of React Hooks (Biology Analogy)

Simulating a Living Cell: React + TypeScript

Let’s simulate a living cell using React hooks. Each cell will:

• Consume energy over time (useEffect)
• Store internal state (useState)
• Track lifecycle age (useRef)
• Communicate metabolic activity via logs

Cell.tsx Component

import { useEffect, useRef, useState } from "react";

interface CellProps {
  id: number;
  initialEnergy: number;
}

export const Cell = ({ id, initialEnergy }: CellProps) => {
  const [energy, setEnergy] = useState(initialEnergy);
  const ageRef = useRef(0);
  const [alive, setAlive] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      ageRef.current += 1;
      setEnergy((e) => e - 1); // Energy depletes per second

      if (energy <= 0) {
        setAlive(false);
        clearInterval(interval);
        console.log(`Cell ${id} has died at age ${ageRef.current}`);
      } else {
        console.log(`Cell ${id} | Energy: ${energy} | Age: ${ageRef.current}`);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [energy]);

  return (
    <div style={{ padding: 10, border: '1px solid gray', marginBottom: 10 }}>
      <strong>🧬 Cell {id}</strong><br />
      Energy: {energy}<br />
      Status: {alive ? "Alive" : "Dead"}<br />
      Age: {ageRef.current}
    </div>
  );
};

Parent Container: Cell Colony

export const CellColony = () => {
  return (
    <div>
      <h2>🔬 Simulated Cell Colony</h2>
      <Cell id={1} initialEnergy={5} />
      <Cell id={2} initialEnergy={7} />
      <Cell id={3} initialEnergy={10} />
    </div>
  );
};

Key Concepts in This Simulation

Biology Meets React

This simulation shows how biological ideas map perfectly onto software behavior:

Conclusion

React Hooks offer a scalable and intuitive way to model complex systems—from UI interactions to biological behavior. By combining useState, useEffect, and useRef, we created a robust simulation of cellular life, where each component functions as an autonomous unit with dynamic properties.

This is just the beginning—next, we’ll look at how to use useReducer and context to simulate genetic behavior and signaling between cells.

Tags: react typescript hooks biology useEffect useRef frontend simulation