How to Create Dynamic UIs with React

Understanding Dynamic UIs
React Fundamentals for Dynamic UIs
Conditional Rendering: Showing/Hiding Content
Rendering Dynamic Lists with Keys
Event Handling: Making UIs Interactive
Dynamic Forms: Controlled Components
State Management for Complex UIs
Performance Optimization for Dynamic UIs
Practical Example: Building a Dynamic Todo App
Conclusion
References

1. Understanding Dynamic UIs

A dynamic UI is one that updates its content, layout, or behavior in response to user interactions, data changes, or external events (e.g., API responses). Examples include:

A social media feed that loads new posts as you scroll.
A form that validates input in real-time.
A dashboard that updates charts when data refreshes.

In contrast, static UIs (e.g., a basic HTML page) remain fixed after initial rendering.

React excels at dynamic UIs because it uses a declarative approach: instead of manually manipulating the DOM (e.g., with document.getElementById), you describe how the UI should look based on the current state, and React handles updating the DOM efficiently.

2. React Fundamentals for Dynamic UIs

To build dynamic UIs, you first need to master React’s core building blocks: components, JSX, state, and props.

Components: The Building Blocks

React apps are composed of components—reusable, self-contained pieces of UI. Functional components (the modern standard) use JavaScript functions to return JSX:

// A simple functional component
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

JSX: Declarative UI Syntax

JSX (JavaScript XML) lets you write HTML-like code within JavaScript. It’s not HTML, but a syntax extension that React compiles to JavaScript. JSX supports dynamic values with curly braces {}:

const user = { name: "Alice" };
function UserProfile() {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Member since {new Date().getFullYear()}</p> {/* Dynamic date */}
    </div>
  );
}

State: The Source of Truth

State is the data that changes over time and affects the UI. Use the useState hook to add state to functional components:

import { useState } from 'react';

function Counter() {
  // Declare a state variable "count" and a setter function "setCount"
  const [count, setCount] = useState(0); // Initial state: 0

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Here, count is state. When setCount is called, React re-renders the Counter component with the new state, updating the UI.

Props: Passing Data Between Components

Props (short for “properties”) let you pass data from a parent component to a child component. Props are read-only:

// Parent component passing props to Greeting
function App() {
  return <Greeting name="Bob" />; // "Bob" is passed as a prop
}

// Child component receiving props
function Greeting({ name }) { // Destructure "name" from props
  return <h1>Hello, {name}!</h1>; // Renders "Hello, Bob!"
}

3. Conditional Rendering: Showing/Hiding Content

Dynamic UIs often need to display different content based on state. React supports several conditional rendering techniques:

1. If/Else Statements

Use standard JavaScript if/else to conditionally return JSX:

function UserStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

2. Ternary Operator

For inline conditions, use the ternary operator condition ? trueCase : falseCase:

function Notification({ hasUnreadMessages }) {
  return (
    <div>
      {hasUnreadMessages ? (
        <p>You have unread messages!</p>
      ) : (
        <p>No new messages.</p>
      )}
    </div>
  );
}

3. Logical && Operator

Render content only if a condition is true with &&:

function Cart({ items }) {
  return (
    <div>
      <h2>Cart</h2>
      {items.length === 0 && <p>Your cart is empty.</p>} {/* Renders only if cart is empty */}
    </div>
  );
}

4. Element Variables

Store elements in variables and render them conditionally:

function UserDashboard({ user }) {
  let dashboardContent;
  if (user.isAdmin) {
    dashboardContent = <AdminPanel />;
  } else {
    dashboardContent = <UserPanel />;
  }

  return <div>{dashboardContent}</div>;
}

4. Rendering Dynamic Lists with Keys

Rendering lists (e.g., a list of todos, comments, or products) is a common dynamic UI task. Use Array.map() to render arrays in React.

Basic List Rendering

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo.text}</li>
      ))}
    </ul>
  );
}

// Usage: <TodoList todos={[{ text: "Learn React" }, { text: "Build app" }]} />

The Importance of Keys

React needs a way to identify individual items in a list for efficient updates. Always include a key prop when rendering lists:

{todos.map((todo) => (
  <li key={todo.id}>{todo.text}</li> {/* Use a unique "id" as the key */}
))}

Why keys matter:

Keys help React determine which items have changed, been added, or removed.
Use unique, stable values (e.g., database IDs). Avoid indexes (key={index}) unless the list is static (no reordering/additions).

5. Event Handling: Making UIs Interactive

Dynamic UIs require responding to user actions (clicks, typing, etc.). React uses synthetic events (cross-browser wrappers for native events) for consistency.

Handling Clicks

Use the onClick prop to handle button clicks:

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "❤️ Liked" : "🤍 Like"}
    </button>
  );
}

Passing Event Handlers to Child Components

Parent components can pass event handlers to children via props, enabling child components to update parent state:

// Parent component
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

// Child component (receives handler via props)
function Child({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

Common Events

React supports all standard events (e.g., onChange, onSubmit, onMouseOver). For example, handle input changes with onChange:

function SearchBar() {
  const [query, setQuery] = useState("");

  return (
    <input
      type="text"
      placeholder="Search..."
      value={query}
      onChange={(e) => setQuery(e.target.value)} // Update state on input
    />
  );
}

6. Dynamic Forms: Controlled Components

Forms are critical for dynamic UIs (e.g., user registration, search). React recommends controlled components, where form data is managed by component state.

Controlled vs. Uncontrolled Components

Controlled component: The input’s value is tied to state, and onChange updates the state. React fully controls the input.
Uncontrolled component: Uses ref to access the DOM directly (rarely recommended for dynamic forms).

Example: A Controlled Form

Here’s a form with multiple inputs (text, checkbox, select) managed by state:

import { useState } from 'react';

function UserForm() {
  // Initialize state with default values
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subscribe: false,
    favoriteColor: "blue"
  });

  // Update state when inputs change
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value // Handle checkboxes
    }));
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault(); // Prevent default form reload
    console.log("Form submitted:", formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />

      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />

      <label>
        <input
          type="checkbox"
          name="subscribe"
          checked={formData.subscribe}
          onChange={handleChange}
        />
        Subscribe to newsletter
      </label>

      <select
        name="favoriteColor"
        value={formData.favoriteColor}
        onChange={handleChange}
      >
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
      </select>

      <button type="submit">Submit</button>
    </form>
  );
}

This form dynamically updates formData as the user types, and submits the latest data.

7. State Management for Complex UIs

For small apps, component-level state (useState) works well. But for larger apps with shared state (e.g., user authentication, theme), you need centralized state management.

The Context API lets you share state between components without prop drilling (passing props through many levels).

Step 1: Create a Context

import { createContext, useContext, useState } from 'react';

// Create a context with a default value
const ThemeContext = createContext();

Step 2: Provide Context to Components
Wrap components in a ThemeContext.Provider to make state available:

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children} {/* All child components can access the context */}
    </ThemeContext.Provider>
  );
}

Step 3: Consume Context
Use useContext to access the state in any child component:

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button 
      style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#333" : "#fff" }}
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    >
      Toggle {theme} Theme
    </button>
  );
}

Redux: For Large-Scale Apps

For apps with complex state (e.g., e-commerce carts, dashboards), Redux provides a predictable state container. It uses a single store, actions, and reducers to manage state.

Note: Redux has a steeper learning curve; start with Context API for simpler apps.

8. Performance Optimization for Dynamic UIs

Dynamic UIs often re-render frequently (e.g., on every keystroke). Poorly optimized re-renders can cause lag. Here’s how to optimize:

`React.memo`: Memoize Components

React.memo prevents unnecessary re-renders of functional components when props haven’t changed:

const MemoizedComponent = React.memo(function MyComponent({ prop }) {
  // Only re-renders if "prop" changes
});

`useMemo`: Memoize Expensive Calculations

useMemo caches the result of expensive functions, re-computing only when dependencies change:

const totalPrice = useMemo(() => {
  // Expensive calculation (e.g., summing a large list)
  return items.reduce((sum, item) => sum + item.price, 0);
}, [items]); // Re-run only if "items" changes

`useCallback`: Memoize Event Handlers

useCallback memoizes functions, preventing child components from re-rendering due to new function references:

const handleClick = useCallback(() => {
  setCount(count + 1);
}, [count]); // Re-create only if "count" changes

9. Practical Example: Building a Dynamic Todo App

Let’s combine everything to build a todo app with:

Adding todos
Toggling todo completion
Deleting todos

Step 1: Set Up State

We’ll use useState to manage the todo list and input field:

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]); // Array of todos
  const [newTodoText, setNewTodoText] = useState(""); // Input state

Step 2: Add Todo Function

Handle adding a new todo when the user submits the form:

  const addTodo = (e) => {
    e.preventDefault();
    if (!newTodoText.trim()) return; // Ignore empty todos

    const newTodo = {
      id: Date.now(), // Unique ID using timestamp
      text: newTodoText,
      completed: false
    };

    setTodos(prev => [...prev, newTodo]); // Add new todo to array
    setNewTodoText(""); // Clear input
  };

Step 3: Toggle and Delete Todos

Add functions to toggle completion and delete todos:

  const toggleTodo = (id) => {
    setTodos(prev => 
      prev.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  };

Step 4: Render the UI

Combine conditional rendering, lists, and event handlers:

  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      
      {/* Add Todo Form */}
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={newTodoText}
          onChange={(e) => setNewTodoText(e.target.value)}
          placeholder="Add a new todo..."
        />
        <button type="submit">Add</button>
      </form>

      {/* Todo List */}
      {todos.length === 0 ? (
        <p>No todos yet! Add one above.</p>
      ) : (
        <ul>
          {todos.map(todo => (
            <li 
              key={todo.id} 
              style={{ textDecoration: todo.completed ? "line-through" : "none" }}
            >
              <span onClick={() => toggleTodo(todo.id)}>{todo.text}</span>
              <button onClick={() => deleteTodo(todo.id)}>×</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default TodoApp;

10. Conclusion

Building dynamic UIs with React involves mastering state, conditional rendering, lists, event handling, and state management. By combining these techniques, you can create responsive, interactive apps that adapt to user input and data changes.

Remember:

Use useState for component-level state.
Leverage conditional rendering and lists for dynamic content.
Optimize performance with React.memo, useMemo, and useCallback.
For complex apps, use Context API or Redux for state sharing.

Practice with projects like the todo app, then explore advanced topics like React Query (for API data) or React Router (for dynamic routing).

Table of Contents