Understanding React Fundamentals

Published on March 30, 2025

React is a JavaScript library for building user interfaces, particularly single-page applications. It allows you to create reusable UI components.

What is React?

React was developed by Facebook. It follows a component-based architecture and uses a virtual DOM for efficient rendering.

Key Features:

Declarative UI development
Component-based architecture
Virtual DOM for performance
Rich ecosystem of tools and libraries
Strong community support

Components

Components are the building blocks of React applications. They are reusable pieces of UI that can be composed together to create complex interfaces.

Function Components

Function components are the simplest way to define components in React. They are functions that return JSX.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

State and Props

Props

Props are read-only properties passed from parent to child components:

function UserCard({ name, email }) {
  return (
      <div>
          <h2>{name}</h2>
          <p>{email}</p>
      </div>
  );
}

State

State is mutable data that can change over time:

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

  return (
      <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
  );

}

Hooks

Hooks are functions that allow you to use state and other React features in function components.

useState

const [state, setState] = useState(initialState);

// Update the state setState(newState);
// pass the new state to the function
setState((prevState) => prevState + 1); // pass a function that takes the previous state and returns the new state

useEffect

useEffect(() => {
  // This will run when the component mounts and when the dependencies change

  return () => {
    // This will run when the component unmounts
    // or when the dependencies change
  };

}, [dependencies]); // Specify dependencies to trigger the effect when the dependencies change

useRef

const ref = useRef(initialValue);

// ref will allow us to access the input element
// ref.current.value will give us the value of the input

<input ref={ref} />

<input
  ref={(element) => {
      // element is the input element
      // we can access the input element here
      // we can also update the input element here
  }}
/>

Virtual DOM

React uses a virtual DOM to optimize rendering performance:

When state changes, React creates a new virtual DOM tree
Compares it with the previous virtual DOM tree
Updates only the changed elements in the real DOM

This process is called reconciliation and helps maintain high performance even with frequent updates.

Key Takeaways

Component Architecture
- Reusable UI components
- Clear separation of concerns
- Easy to maintain and test
- Promotes code reuse
State Management
- Props for parent-child communication
- State for component data
- Hooks for functional components
- Context for global state
Performance Optimization
- Virtual DOM for efficient updates
- Memoization for expensive computations
- Code splitting for better load times
- Lazy loading for components

References

React Documentation

GET IN TOUCH

Let's work together

I build exceptional and accessible digital experiences for the web

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com