React Source Code
Published Jun 24, 2025
⋅
Updated Jun 25, 2025
⋅
1 minutes read
index.js → reactClient.js
import {
REACT_FRAGMENT_TYPE,
REACT_PROFILER_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_TYPE,
REACT_SUSPENSE_LIST_TYPE,
REACT_LEGACY_HIDDEN_TYPE,
REACT_ACTIVITY_TYPE,
REACT_SCOPE_TYPE,
REACT_TRACING_MARKER_TYPE,
REACT_VIEW_TRANSITION_TYPE,
} from 'shared/ReactSymbols';| Use Case | Purpose |
|---|---|
| Tag objects | Mark an object as being a React element, portal, fragment, etc. |
| Type checking | Later check if an object is a React element (or a specific subtype) |
| Behavior control | Implement different render logic based on type |
React symbols help detect the type, let react do a routine check if it is actually a div, or fragment or whatever,
Class components
| Feature | Component | PureComponent |
|---|---|---|
shouldComponentUpdate | Default: always true | Implements shallow comparison on props and state |
| Optimization | None | Prevents re-rendering when props and state don't change shallowly |
| Flag | isReactComponent | isPureReactComponent |
Confusion of are class components behind functional components verdict:
| Type | How You Define It | Backed by |
|---|---|---|
| Class components | class MyComponent extends Component | Component, PureComponent |
| Function components | function MyComponent(props) {} or arrow functions | Internally managed by React's hooks and fiber |
React Children
React.Children.* — a utility that helps handle all kinds of props.children
https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js
<MyComponent>
<div>a</div>
<div>b</div>
</MyComponent>Internally what happens is
React.Children.map((props.children (child,i)) => {
return React.cloneElement(child, {key: i})
})
// this is what happens when we have shit inside 1 wrapper component
function MyComponent(props) {
console.log(props.children);
return <div>{props.children}</div>;
}
// there is also
React.Children.map
React.Children.forEach
React.Children.count
React.Children.toArray
React.Children.only
<MyComponent>
<div />
<span />
</MyComponent>
[ReactElement('div'), ReactElement('span')]useEffect Cleanup Behavior
What will be the console output when this component renders?
import "./styles.css";
import { useState, useEffect } from "react";
export default function App() {
const [value, setValue] = useState(1);
console.log("value", value);
useEffect(() => {
console.log("Effect", value);
return () => {
console.log("Cleanup", value);
};
}, [value]);
useEffect(() => {
const timer = setTimeout(() => {
setValue(2);
}, 1000);
return () => clearTimeout(timer);
}, []);
return <div>{value}</div>;
}