Code With Riad

Code With Riad 👨‍💻 Riad Mahamud | MERN Stack Developer
🚀 Sharing code tips, dev projects & modern web solutions.

⚡ Day 37 of my React.js JourneyToday’s topic: Building a Custom Hook — useDebounceWhen a user types fast (like in a sear...
06/11/2025

⚡ 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 JourneyToday’s topic: Custom Hooks — Reusing Logic Like a ProReact Hooks like useState and useEf...
25/10/2025

🧩 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 JourneyToday’s topic: Advanced Pattern — React.lazy + Suspense for Dynamic ImportsWhen your app ...
08/10/2025

🚀 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 JourneyToday’s topic: Performance Optimization with React.memo & useCallbackAs apps grow, unnec...
06/10/2025

⚙️ 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 JourneyToday’s topic: Todo App with Context + useReducerYesterday we learned useReducer. Today, ...
03/10/2025

âś… 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 JourneyToday’s topic: useReducer HookWhen state management gets complex (multiple values, deep u...
02/10/2025

đź“ť 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 DiveReact apps often suffer from “prop...
01/10/2025

🎯 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 JourneyToday’s topic: React PortalsBy default, React renders components inside the root DOM node...
29/09/2025

🚪 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 JourneyToday’s topic: Error Boundaries in ReactEven the best React apps can crash because of ru...
28/09/2025

🛡️ 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.

25/09/2025

🚀 New JavaScript Project Completed – Sprite Animation with Multiple Effects! 🎨✨

I recently built a simple sprite animation using JavaScript where a small plant comes to life 🌱 with different animation effects:

✅ Grow – Smooth scaling animation
✅ Wink – Playful flicker effect
✅ Float – Gentle floating motion
✅ Hide – Seamless fade-out transition
✅ All Animations – Combined effects for extra fun!

This project was a great way to practice DOM manipulation, CSS transitions, and JavaScript event handling. 🎯
It also shows how powerful even simple animations can be in creating interactive and engaging user experiences.

💡 Whether it’s a small web app, a game, or a playful UI component, animations help improve UX and keep users engaged.

👉 If you’re passionate about creative coding or want to make your websites more interactive and fun, let’s connect!

Address

Panchagarh
5000

Website

Alerts

Be the first to know and let us send you an email when Code With Riad posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Shortcuts

Share

Category