Code With Riad

⚡ Day 37 of my React.js Journey

Today’s topic: Building a Custom Hook — useDebounce

When a user types fast (like in a search bar), we don’t want to call the API on every keystroke.
👉 We “debounce” the input — wait for the user to stop typing before running the logic.

Let’s build it! 👇

import { useState, useEffect } from "react";

function useDebounce(value, delay = 500) {
const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(handler);
}, [value, delay]);

return debouncedValue;
}

// Usage
function Search() {
const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 600);

useEffect(() => {
if (debouncedQuery) console.log("Search for:", debouncedQuery);
}, [debouncedQuery]);

return setQuery(e.target.value)} placeholder="Search..." />;
}

✅ Why useDebounce matters:

Prevents unnecessary API calls

Boosts performance

Creates a smoother user experience

💡 Used in search bars, live filters, or form validations!

Tomorrow: Building a Custom Hook — usePrevious (track previous values) 🔄

🧩 Day 35 of my React.js Journey

Today’s topic: Custom Hooks — Reusing Logic Like a Pro

React Hooks like useState and useEffect are great… but what if you need the same logic in multiple components?
👉 That’s where Custom Hooks come in.

They let you extract and reuse stateful logic cleanly.

Example:

import { useState, useEffect } from "react";

function useFetch(url) {
const [data, setData] = useState(null);

useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, [url]);

return data;
}

// Usage
function Users() {
const users = useFetch("https://jsonplaceholder.typicode.com/users");
return {JSON.stringify(users, null, 2)};
}

✅ Why use Custom Hooks:

Reuse logic without repeating code

Keep components clean

Share easily across projects

💡 Naming rule: always start with use (e.g., useAuth, useForm, useDarkMode)

Tomorrow: Building a Custom Hook — useLocalStorage 🧠

🚀 Day 34 of my React.js Journey

Today’s topic: Advanced Pattern — React.lazy + Suspense for Dynamic Imports

When your app grows, you don’t want to load every component at once.
👉 That’s where code-splitting comes in using React.lazy() and Suspense.

It lets React load components only when needed, improving performance and reducing bundle size.

Example:

import React, { Suspense } from "react";

const Profile = React.lazy(() => import("./Profile"));

function App() {
return (



);
}

✅ How it helps:

Loads big components on demand

Boosts initial load speed

Perfect for routes, modals, and dashboard sections

💡 Pro tip: Combine with React Router to lazy-load entire pages!

Tomorrow: Custom Hooks — Reusing Logic Like a Pro 🧠

⚙️ Day 33 of my React.js Journey

Today’s topic: Performance Optimization with React.memo & useCallback

As apps grow, unnecessary re-renders can slow things down. React gives us two great tools to fix that:

🧠 React.memo

Prevents a component from re-rendering unless its props change.

const Child = React.memo(({ value }) => {
console.log("Rendered");
return {value};
});

⚡ useCallback

Prevents a function from being recreated on every render.

function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => setCount(c => c + 1), []);
return ;
}

✅ Why this matters:

Keeps your app fast

Reduces wasted re-renders

Crucial for lists, forms, and heavy UIs

💡 Pro tip: Use them when needed — overusing can make debugging harder.

Tomorrow: React.lazy + Suspense for Dynamic Imports (Advanced Pattern) 🚀

✅ Day 32 of my React.js Journey

Today’s topic: Todo App with Context + useReducer

Yesterday we learned useReducer. Today, let’s combine it with Context API to manage global state-perfect for a Todo App.

Example:

import React, { createContext, useReducer, useContext } from "react";

const TodoContext = createContext();

function todoReducer(state, action) {
switch (action.type) {
case "add":
return [...state, { id: Date.now(), text: action.text }];
case "remove":
return state.filter(todo => todo.id !== action.id);
default:
return state;
}
}

function TodoProvider({ children }) {
const [todos, dispatch] = useReducer(todoReducer, []);
return (

{children}

);
}

function TodoList() {
const { todos, dispatch } = useContext(TodoContext);
return (

dispatch({ type: "add", text: "New Task" })}>
Add Todo


{todos.map(todo => (

{todo.text}
dispatch({ type: "remove", id: todo.id })}>
❌


))}


);
}

export default function App() {
return (



);
}

🚀 With this approach:

Context provides global state

Reducer manages complex updates

Any component can add/remove todos

Tomorrow: React.memo & useCallback → optimize performance.

📝 Day 31 of my React.js Journey

Today’s topic: useReducer Hook

When state management gets complex (multiple values, deep updates), useState can become messy.
👉 That’s where useReducer shines.

It’s like a mini Redux built into React.

Example:

import React, { useReducer } from "react";

function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });

return (

Count: {state.count}
dispatch({ type: "increment" })}>+
dispatch({ type: "decrement" })}>-

);
}

✅ Why use useReducer?

Keeps logic organized in one reducer function

Easy to scale for complex state

Pairs perfectly with Context API for global state

Tomorrow: Building a Todo App with Context + Reducer 🛠️

🎯 Day 30 of my React.js Journey – Milestone Post 🚀

Today’s topic: Context API Deep Dive

React apps often suffer from “prop drilling” — passing props down multiple levels.
👉 The Context API solves this by sharing data across components without manually passing props.

Example:

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

function App() {
const [theme, setTheme] = useState("light");

return (



);
}

function Toolbar() {
const { theme, setTheme } = useContext(ThemeContext);
return (
setTheme(theme === "light" ? "dark" : "light")}>
Current Theme: {theme}

);
}

✅ Benefits of Context:
Share state globally without prop drilling
Great for themes, authentication, language settings, etc.
Cleaner & more maintainable code

⚠️ Use carefully: too much context can make debugging harder → consider Redux, Zustand, or Jotai for larger apps.

🌟 30 Days Recap:
✔️ Components & Props
✔️ Hooks (useState, useEffect, useContext, etc.)
✔️ React Router basics
✔️ Performance (lazy loading, error boundaries, portals)

Next chapter → Advanced Patterns & State Management 🔥

🚪 Day 29 of my React.js Journey

Today’s topic: React Portals

By default, React renders components inside the root DOM node. But sometimes, we need to render outside of it (like modals, tooltips, or dropdowns).
👉 That’s where Portals come in.

Example:

import ReactDOM from "react-dom";

function Modal({ children }) {
return ReactDOM.createPortal(
{children},
document.getElementById("modal-root")
);
}

✅ Benefits of Portals:

Keep components logically in React tree but render outside DOM hierarchy

Solve z-index issues with modals/popups

Improve accessibility (focus trapping, screen readers)

So next time your modal breaks layout — use Portals instead of hacks. 🚀

Tomorrow: Context API Deep Dive — when and how to use it.

🛡️ Day 28 of my React.js Journey

Today’s topic: Error Boundaries in React

Even the best React apps can crash because of runtime errors. To avoid breaking the entire UI, React provides Error Boundaries.

👉 Error Boundaries are React components that catch errors in their child components and display a fallback UI instead.

Example:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError() {
return { hasError: true };
}

componentDidCatch(error, info) {
console.error("Error caught:", error, info);
}

render() {
if (this.state.hasError) {
return Something went wrong!;
}
return this.props.children;
}
}

Usage:





✅ Benefits:

Prevents full app crashes

Shows graceful fallback UI

Helps with debugging in production

⚠️ Note: Error Boundaries do not catch errors in event handlers, async code, or server-side rendering.

Tomorrow: React Portals — rendering outside the root div.