React at its Core: Components, State, and the Re-render

When you first learn React, the ecosystem feels overwhelming. You immediately hear about custom hooks, context providers, the virtual DOM, and strict mode. But if you strip all the complex jargon away, React is actually incredibly simple.

At its absolute core, React relies on just two concepts: components and state. Understanding exactly how these two pieces interact is the only way to truly master the framework.

Components are Just Functions

A component is just a regular JavaScript function. Instead of returning a number or a mathematical calculation, it returns HTML. That is the entire secret. You write a function, you give it a name with a capital letter, and it draws something on the screen.

function Greeting() {
  return <h1>Hello, user!</h1>;
}

Because it is just a JavaScript function, it plays by standard JavaScript rules. It reads from top to bottom, executes the logic inside, and returns an output.

State is Just Memory

In a normal JavaScript function, variables are temporary. When the function finishes running, all of its local variables are destroyed to save memory.

React state is different. State is a special type of memory that React keeps safe outside of your function. This allows the data to survive even after the component finishes drawing the UI on the screen.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

How Re-rendering Actually Works

This is the specific mechanic where beginners get stuck. What actually happens when a user clicks that button and triggers setCount?

When you call a state updater function, you are doing more than just changing a variable. You are sending a direct signal to the React engine. You are telling React that the data has changed, and the current UI on the screen is now out of date.

React responds to this signal by taking your entire component function and executing it completely from scratch.

It runs the function again from the very top line to the bottom line. However, this time, when React executes the useState line, it does not give you the default value of zero. It reaches into its external memory and hands the function the brand new value.

Your function then uses that new value to generate a fresh piece of HTML. Finally, React takes that new HTML and swaps it onto the browser screen. This process is called a re-render.

Why This Fundamental Rule Matters

Once you realize that a state change causes the entire function to run again, React stops feeling like magic.

It explains why normal variables do not work for tracking user input. If you define a standard let count = 0 variable inside your component and try to update it, the UI will never change. Even if you force the component to re-render, that standard variable will just get reset back to zero because the function is running from the very beginning again.

Conclusion

React is a system built on one strict loop. You change the state, React runs your component function again with the new data, and the screen updates to match. Once you stop looking at React as a massive web of files and start looking at it as a simple loop of state and UI, building applications becomes significantly easier.