Dev.to

React + TypeScript: Simulating a Sine Wave with useEffect and useRef

React + TypeScript: Simulating a Sine Wave with useEffect and useRef In modern React development, hooks like useEffect, useRef, and useState allow us to build elegant, reactive components with minimal boilerplate. In this article, we'll build a real-time mathematical simulation that visualizes the behavior of the sine function using React hooks and TypeScript. What We'll Build We’ll create a component called SineWaveTimer that: Simulates increasing angle values Computes the sine of those angles Displays the live results every second This is a simple, elegant way to demonstrate: How useEffect is used to manage side effects like timers How useRef can store mutable values that persist between renders How useState captures reactive UI state Step-by-Step Breakdown Step 1: Setup State and Ref const [angle, setAngle] = useState(0); const [value, setValue] = useState(0); const timerRef = useRef(null); angle: stores the current angle in degrees value: stores the sine of the current angle timerRef: holds a reference to our interval ID (for cleanup) Step 2: useEffect for Timer Logic useEffect(() => { timerRef.current = setInterval(() => { setAngle(prev => { const nextAngle = prev + 15; setValue(Math.sin(nextAngle * Math.PI / 180)); return nextAngle; }); }, 1000); return () => { if (timerRef.current) { clearInterval(timerRef.current); } }; }, []); Initializes a setInterval to run every second Each tick increases angle by 15 degrees Updates value by calculating Math.sin() in radians Cleanup ensures no memory leaks when the component unmounts Step 3: Display the Output return (

May 18, 2025 - 06:28
 0
React + TypeScript: Simulating a Sine Wave with useEffect and useRef

React + TypeScript: Simulating a Sine Wave with useEffect and useRef<br>

React + TypeScript: Simulating a Sine Wave with useEffect and useRef

In modern React development, hooks like useEffect, useRef, and useState allow us to build elegant, reactive components with minimal boilerplate. In this article, we'll build a real-time mathematical simulation that visualizes the behavior of the sine function using React hooks and TypeScript.

What We'll Build

We’ll create a component called SineWaveTimer that:

  • Simulates increasing angle values
  • Computes the sine of those angles
  • Displays the live results every second

This is a simple, elegant way to demonstrate:

  • How useEffect is used to manage side effects like timers
  • How useRef can store mutable values that persist between renders
  • How useState captures reactive UI state

Step-by-Step Breakdown

Step 1: Setup State and Ref 

const [angle, setAngle] = useState(0);
const [value, setValue] = useState(0);
const timerRef = useRef<NodeJS.Timeout | null>(null);
  • angle: stores the current angle in degrees
  • value: stores the sine of the current angle
  • timerRef: holds a reference to our interval ID (for cleanup)

Step 2: useEffect for Timer Logic 

useEffect(() => {
  timerRef.current = setInterval(() => {
    setAngle(prev => {
      const nextAngle = prev + 15;
      setValue(Math.sin(nextAngle * Math.PI / 180));
      return nextAngle;
    });
  }, 1000);

  return () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
  };
}, []);
  • Initializes a setInterval to run every second
  • Each tick increases angle by 15 degrees
  • Updates value by calculating Math.sin() in radians
  • Cleanup ensures no memory leaks when the component unmounts

Step 3: Display the Output 

return (
  <div className="math-card">
    <h3>
Read More

Tags:

Previous Article

A Brief History of Artificial Intelligence

Next Article

Data Structures Study Guide for BCA Semester 2 - MCU Bhopal

Related Posts

How to Make a Perl Script Executable on Your Web Server?

How to Make a Perl Script Executable on Your Web Server?

May 12, 2025  0

Refactor Advisor and Analysis Automation Tool- Smart Code Amazon Q CLI Tool

Refactor Advisor and Analysis Automation Tool- Smart Co...

May 11, 2025  0

Building a Simple Rust CLI Tool for File Operations

Building a Simple Rust CLI Tool for File Operations

May 12, 2025  0