DEV Community: Khalid Edaoudi

Top 5 React essential techniques every beginner should know!

Khalid Edaoudi — Sat, 21 Mar 2026 13:57:40 +0000

React has become one of the most widely adopted libraries for building user interfaces. Its component-based architecture, declarative style, and rich ecosystem make it a powerful tool for projects of any size. But writing good React code requires more than just knowing JSX, it requires understanding the core techniques that make React applications clean, performant, and maintainable.
Here are five techniques that form the backbone of professional React development.

1. Conditional Rendering

In any real application, what appears on screen depends on state, is the user logged in ? Has the data loaded ? Did an error occur ? Conditional rendering is how React handles these scenarios, and mastering it means your UI always reflects reality.
The simplest approach uses JavaScript's ternary operator directly inside JSX:

function Dashboard({ user }) {
  return (
    <div>
      {user ? <WelcomePanel name={user.name} /> : <LoginPrompt />}
    </div>
  );
}

For cases where you only want to render something or nothing, the logical && operator keeps things concise:

{hasNotifications && <NotificationBadge count={notifications.length} />}

2. Lists and Keys

Rendering dynamic lists is something you'll do in nearly every React project, product catalogs, navigation menus, table rows. The pattern itself is straightforward: map over an array and return JSX for each item.

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

The critical detail here is the key prop. React uses keys to track which items have changed, been added, or been removed. When keys are stable and unique (like a database ID), React can efficiently update only the elements that actually changed instead of re-rendering the entire list.
A common mistake is using the array index as a key. This works fine for static lists that never reorder, but the moment items are sorted, filtered, or inserted, index-based keys cause subtle bugs — inputs lose their values, animations break, and components reset unexpectedly. The rule of thumb:

use a stable, unique identifier from your data whenever possible

3. Controlled Components

Forms are notoriously tricky in web development, and React's answer is the controlled component pattern. In a controlled component, the form element's value is driven by React state, and every change flows through a handler function.

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

  const handleSubmit = (e) => {
    e.preventDefault();
    search(query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={query}
        onChange={() => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Go</button>
    </form>
  );
}

This might feel like extra ceremony compared to just reading the DOM directly, but the benefits are significant. Because React owns the value at all times, you can instantly validate input, enforce formatting , disable a submit button until a form is valid, or synchronize multiple fields that depend on each other all without ever touching the DOM.

Controlled components embody one of React's core philosophies: the UI is a function of state. When state is the single source of truth, your forms become predictable and easy to debug.

4. Fetching Data

Most React applications need to communicate with a server, and data fetching is where many developers first encounter the interplay between effects and state. A typical pattern with useEffectlooks like this:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    e.preventDefault();
    async function fetchUser() {
      try {
        setLoading(true);
        const res = await fetch(`/api/users/${userId}`);
        if (!res.ok) throw new Error('Failed to fetch');
        const data = await res.json();
        setUser(data);
        setError(null);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  return <ProfileCard user={user} />;
}

In production, most teams reach for a dedicated data-fetching library like React Query, TanStack Query (I will discuss TanStack library in another blog) or SWR. These handle caching, background refetching, pagination, and retry logic out of the box, letting you focus on your application logic instead of reinventing request management. Understanding the manual approach above is still valuable, though it teaches you why those libraries exist and what problems they solve.

5. State Management with Redux

As applications grow, managing state that's shared across many components becomes a real challenge. Props can be passed down one or two levels without issue, but when you find yourself threading the same data through five layers of components that don't even use it (prop drilling), it's time for a dedicated state management solution. Redux is the most established choice in the React ecosystem.

Redux is built on three principles:

Single store holds the application state representing the single source of thruth.
State is read-only and can only be changed by dispatching actions.
Changes are made through pure functions called reducers.

Install Redux Toolkit:

npm install @reduxjs/toolkit

Here's what a modern Redux setup looks like using Redux Toolkit, which is now the recommended way to write Redux:

StoreHook.ts

import {useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from '../redux/store'
import type { TypedUseSelectorHook } from 'react-redux'

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

This file provides typed hooks for interacting with the Redux store, built on top of React-Redux's useDispatch and useSelector. It exports useAppDispatch and useAppSelector. These hooks replace the default untyped versions, ensuring type safety when dispatching actions or selecting state in components. This is a best practice in TypeScript Redux setups, preventing runtime errors and improving developer experience by leveraging inferred types from the store configuration.

StateSlice.ts

import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'


interface States {
  state1: number,
  state2: number
}

const initialState: States = { state1: 0, state2:0 }

const stateSlice = createSlice({
    name:'state',
    initialState,
    reducers : {
        setNewState1: (state, action:PayloadAction<number>) => {
            state.state1 = action.payload
        },
        setNewState2: (state, action:PayloadAction<number>) => {
            state.state2 = action.payload
        }
    },
})

export const {setNewState1, setNewState2} = stateSlice.actions
export default stateSlice.reducer

This file defines a Redux slice for managing application state using Redux Toolkit's createSlice. It establishes the structure and logic for two numeric states (state1 and state2), which are initialized to 0. The slice includes two reducers: setNewState1 and setNewState2, each accepting a number payload to update the respective state property. This slice encapsulates the state management logic, allowing components to dispatch actions to modify these values immutably. It's a core part of Redux's modular approach, separating concerns by grouping related state and actions into a single unit.

Store.ts

import { configureStore } from '@reduxjs/toolkit'
import stateReducer from "./StateSlice"

export const store = configureStore({
  reducer: {
    state: stateReducer
  },
})
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

This file configures the Redux store using Redux Toolkit's configureStore. It combines multiple reducers into a single store object, enabling centralized state management across the app. The store is typed with RootState (inferred from the store's state) and AppDispatch (the store's dispatch function), which are exported for use in components and hooks. This setup ensures the store is ready to handle actions and provide state to the React app, promoting predictable state updates and debugging capabilities.

State1.tsx

import { useAppSelector } from "../../hooks/StoreHook";

export default function State1() {

    const state1 = useAppSelector((state) => state.state.state1)
  return (
    <div className="border cursor-default rounded-md font-bold bg-orange-400 hover:bg-orange-500 transition-colors w-fit py-5 px-8">
      <span className="font-normal">State1 : </span>{state1}
    </div>
  );
}

State2.tsx

import { useAppSelector } from "../../hooks/StoreHook";

export default function State2() {
    const state2 = useAppSelector((state) => state.state.state2)
  return (
    <div className="border cursor-default hover:bg-green-500 font-bold transition-colors rounded-md bg-green-400 w-fit py-5 px-8">
      <span className="font-normal">State2 : </span>{state2}
    </div>
  );
}

Those React components displays the values of state1 & state2 from the Redux store using the useAppSelector hook. It selects the specific slice of state and renders it. The component is read-only, serving as a UI representation of the state without any update logic. they demonstrate how to connect a component to Redux for displaying data, keeping the UI reactive to state changes.

StateManagement.tsx

import { useState } from "react";
import State1 from "./reduxComponent/State1";
import State2 from "./reduxComponent/State2";
import { setNewState1, setNewState2 } from "../redux/StateSlice";
import { useAppDispatch } from "../hooks/StoreHook";

export default function StateManagement() {
  const [error, setError] = useState(false);
  const dispatch = useAppDispatch();
  const [state, setState] = useState(String);
  return (
    <div className="flex justify-center mt-5">
      <div className="w-1/3">
        <div className="flex justify-between">
          <input
            className={`
          w-96 px-4 py-2 border rounded-lg
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
          disabled:bg-gray-100 disabled:cursor-not-allowed
          transition-all duration-200
          ${error ? "border-red-500 focus:ring-red-500" : "border-gray-300"}
        `}
            type="text"
            value={state}
            onChange={(e) => setState(e.target.value)}
          />
          <button
            onClick={() => {
              dispatch(setNewState1(Number(state.split(" ")[0])));
              dispatch(setNewState2(Number(state.split(" ")[1])));
            }}
            className="px-5 border rounded-md hover:bg-blue-600 transition-colors bg-blue-400 text-white"
          >
            Update
          </button>
        </div>
        <div className="flex justify-between mt-8">
          <State1 />
          <State2 />
        </div>
      </div>
    </div>
  );
}

This page component integrates Redux for state management and user interaction. It uses useAppDispatch to dispatch actions (setNewState1 and setNewState2) based on user input from a text field. The input expects space-separated numbers (e.g., "10 20"), which are parsed and updated in the store via the "Update" button. It also renders State1 and State2 components to show the current state values.

NOTE: we didn't pass any props to State1 & State2 Components, now all the states are handled by Redux.

Now we had been demonstrates a complete Redux flow: user input triggers actions, reducers update state, and components re-render to reflect changes, all while handling potential errors (though the error state isn't fully utilized here).

Building a Spring Boot Application with Spring Cloud Stream for Kafka Stream Processing

Khalid Edaoudi — Sun, 23 Nov 2025 22:01:54 +0000

1. Download Kafka

Download the version 2.13-2.7.0 of Kafka (https://kafka.apache.org/downloads)

2. Start Kafka

To start Kafka we should first execute Zookeeper (It handles kafka instances in our application).

we add start command to open the output terminal in an new prompt, bin\windows\zookeeper-server.start.bat is the script file to run zookeeper based on configuration file config/zookeeper.properties, if you have Linux operating system, the zookeeper script is in bin\zookeeper-server.start.sh.

So we have now zookeeper running on port 2181.

By the same way we start Kafka.

Sometimes Kafka won't be running because wmic (Windows Management Instrumentation Command-line) is missing, it used to check JAVA_HOME and java version, to fix that open kafka-start-server.bat file in your editor and replace the whole content by the following code :

@echo off
rem Licensed to the Apache Software Foundation (ASF) under one or more
rem contributor license agreements.  See the NOTICE file distributed with
rem this work for additional information regarding copyright ownership.
rem The ASF licenses this file to You under the Apache License, Version 2.0
rem (the "License"); you may not use this file except in compliance with
rem the License.  You may obtain a copy of the License at
rem
rem     http://www.apache.org/licenses/LICENSE-2.0
rem
rem Unless required by applicable law or agreed to in writing, software
rem distributed under the License is distributed on an "AS IS" BASIS,
rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
rem See the License for the specific language governing permissions and
rem limitations under the License.


IF [%1] EQU [] (
    echo USAGE: %0 server.properties
    EXIT /B 1
)

SetLocal
IF ["%KAFKA_LOG4J_OPTS%"] EQU [""] (
    set KAFKA_LOG4J_OPTS=-Dlog4j.configuration=file:%~dp0../../config/log4j.properties
)

REM --- Force 64-bit heap, supprime la détection avec wmic ---
IF ["%KAFKA_HEAP_OPTS%"] EQU [""] (
    set KAFKA_HEAP_OPTS=-Xmx1G -Xms1G
)

"%~dp0kafka-run-class.bat" kafka.Kafka %*
EndLocal

Then you would have Kafka running on port 9092.

3. kafla-console-producer & kafka-console-consumer

kafla-console-producer and kafka-console-consumer are kafka console clients to test kafka on the console, let's try that.

first, we start the consumer to listen to a topic of name R1 using bin\windows\kafka-console-consumer.bat script.

We mention the address of a running kafka instance using --bootstrap-server then the name of the topic to listen to.

Now we have a consumer which is subscribed to the topic R1.

Let's create a producer using bin\windows\kafka-console-producer.bat script:

On the left, the producer is sending the message "kafka is great" to a Kafka R1 topic, while on the right, the consumer receives the same message in real-time. This illustrates Kafka’s core messaging capability: reliable, real-time communication between distributed systems.

Documentation : https://kafka.apache.org/documentation/#quickstart

3. Create Java Application

We're going to create a Spring Boot project using spring initialzr
We will use Spring boot version 3.5.8 with jar Packaging and Java 17 and choosing Maven as our dependency management system.

As a dependencies add the followings :

Lombok
Spring Web
Spring for Apache Kafka
Spring for Apache Kafka Streams
Cloud Stream

Then click on Generate, unzip the file and open the project on your favorite Java Editor (I recommend Intellij IDEA which is the editor I used in this demo).

4. Create The PageEvent Entity

inside the main package create another package entities then create class named PageEvent.java

package com.example.kafka.entities;

import lombok.*;

import java.util.Date;

@Getter @Setter @AllArgsConstructor @NoArgsConstructor @ToString
public class PageEvent {
    private String name;
    private String user;
    private Date date;
    private long duration;
}

ATTENTION : Lombok may not be working in recent versions of spring boot, to fix that we specify an older lombok version explicitly in pom.xml file.

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.32</version>
    <optional>true</optional>
</dependency>

And also in the plugins section.

<configuration>
    <annotationProcessorPaths>
        <path>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.32</version>
    </path>
    </annotationProcessorPaths>
</configuration>

5. Create PageEventRestController

Create PageEventRestController.java Class in a new package web.

This REST controller exposes an endpoint that publishes PageEvent messages to any Kafka topic. The key part is StreamBridge, a Spring Cloud Stream utility that lets you send messages programmatically without binding the controller to a specific producer function. When the /publish/{topic}/{name} endpoint is called, the controller creates a new PageEvent object, then uses streamBridge.send(topic, pageEvent) to dynamically route the event to the given Kafka topic. This makes it easy to produce messages on demand, especially for testing or building flexible producer APIs.

package com.example.kafka.web;


import com.example.kafka.entities.PageEvent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cloud.stream.function.StreamBridge;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.Date;
import java.util.Random;

@RestController
public class PageEventRestController {

    @Autowired
    private StreamBridge streamBridge;

    @GetMapping("/publish/{topic}/{name}")
    public PageEvent publish(@PathVariable String topic, @PathVariable String name) {
        PageEvent pageEvent = new PageEvent(name,Math.random() > 0.5?"U1":"U2",new Date(),new Random().nextInt(9000));
        streamBridge.send(topic,
                pageEvent);
        return pageEvent;
    }

}

Then You run the KafkaApplicationclass.

Now you open a consumer console subscribed to topic R1 and test the publish controller end-point which represent our producer.

the producer publishes a message and the consumer receives it instantly, confirming that everything is working correctly.

6. Create PageEventConsumer

Now we will create a consumer inside our Spring Boot application, you name it PageEventService.java.

package com.example.kafka.services;

import com.example.kafka.entities.PageEvent;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Service;

import java.util.function.Consumer;

@Service
public class PageEventService {

    @Bean
    public Consumer<PageEvent> pageEventConsumer() {
        return (input) -> {
            System.out.println("**************************************");
            System.out.println(input.toString());
            System.out.println("**************************************");
        };
    }

}

This class defines a Kafka consumer using Spring Cloud Stream’s functional programming model.
Spring Cloud Stream allows you to create message-driven microservices by exposing functions like Consumer<T> that automatically bind to Kafka topics.

In this example, the PageEventService declares a Consumer<PageEvent> bean named pageEventConsumer.
When a PageEvent message arrives from Kafka, Spring Cloud Stream passes it to this function. The consumer then prints the event details between separators, making it easy to verify that the message was received and processed.

This setup provides a clean, minimal way to build real-time Kafka consumers without dealing directly with low-level Kafka APIs—Spring Cloud Stream handles the boilerplate, letting you focus on processing your data.

Then open your application.properties (or application.yml) file and put those properties

spring.cloud.function.definition=pageEventConsumer
spring.cloud.stream.bindings.pageEventConsumer-in-0.destination=R1
spring.cloud.stream.bindings.pageEventConsumer-in-0.group=group1

This configuration tells Spring Cloud Stream which function should be activated, which Kafka topic it should listen to, and which consumer group it belongs to.

spring.cloud.function.definition=pageEventConsumer
This selects the functional bean named pageEventConsumer as the active consumer function. Spring Cloud Stream will bind this function to Kafka automatically.
spring.cloud.stream.bindings.pageEventConsumer-in-0.destination=R1
This maps the input channel of the function to the Kafka topic R1.
Whenever a message is published to the R1 topic, it will be delivered to pageEventConsumer.
spring.cloud.stream.bindings.pageEventConsumer-in-0.group=group1
This assigns the consumer to the Kafka consumer group named group1.

Now you run the application and you test (tap localhost:8080/publish/R1/blog)

7. Create Producer Poller

In Spring Cloud Stream, a producer poller is a mechanism that automatically triggers a Supplier function at a fixed interval so it can generate and publish new messages to a topic without needing an external event.
Instead of manually calling the producer or waiting for an HTTP request, the poller acts like a timer: every few milliseconds or seconds, it executes the Supplier, collects the returned object, and sends it to the configured message channel

 @Bean
    public Supplier<PageEvent> pageEventSupplier() {
        return () -> new PageEvent(
                Math.random() > 0.5?"P1":"P2",
                Math.random() > 0.5?"U1":"U2",
                new Date(),new Random().nextInt(9000));
    }

In appilication.properties file I set spring.cloud.stream.poller.fixed-delay property to 100ms, that mean 100ms is the time interval between each new message.

spring.cloud.function.definition=pageEventConsumer;pageEventSupplier

spring.cloud.stream.bindings.pageEventConsumer-in-0.destination=R1
spring.cloud.stream.bindings.pageEventConsumer-in-0.group=group1

spring.cloud.stream.bindings.pageEventSupplier-out-0.destination=R2
spring.cloud.stream.bindings.pageEventSupplier-out-0.group=group2
spring.cloud.stream.poller.fixed-delay=100

8. Summary

In this tutorial, we explored the essential building blocks of using Kafka with Spring Boot and Spring Cloud Stream, starting from installing Kafka locally, testing message flow with console producers and consumers, and finally building a real-time event streaming application in Java.

You learned how to:

Install and run Zookeeper and Kafka on your machine
Use kafka-console-producer and kafka-console-consumer to test topics manually
Build a REST producer using StreamBridge
Implement a Kafka consumer using Spring Cloud Stream's functional model
Create a Producer Poller with a Supplier to automatically publish messages on a fixed schedule

Together, these components demonstrate how powerful and simple it can be to create event-driven microservices using Spring Cloud Stream. With only a few lines of configuration and functional beans, your application becomes capable of consuming, producing, transforming, and streaming data in real time all without the complexity of low-level Kafka APIs.

From here, you can extend your project by adding Kafka Streams, function compositions, message filtering, windowing, or even advanced analytics pipelines. Event-driven architectures open the door to creating scalable, reactive systems that handle data as it flows.