DEV Community: Ali AbdElbagi

Callback props in React

Ali AbdElbagi — Wed, 26 Mar 2025 20:24:06 +0000

What are Callback Props?

Callback props are just regular props, but instead of passing data, they pass functions that handle specific events.

What’s their exact purpose?

Let’s say you have a component called A, which has a state that holds some data. Inside A, you also have another component, B, which is, for example, a Button.

Now, if you want to execute a specific function when clicking the button in B, and that function should modify the state inside A, you can use callback props.

This is essentially a way for components to communicate with each other.

Explanation of the Example

Looking at the example in the image, the idea is:

When the user clicks the Button, it triggers an action that is passed as a prop (in this case, OnClickToChangeName).

When rendering the Button inside the parent component (A), you pass a function (ChangeNameValue) to the OnClickToChangeName prop.

This function then modifies the state of A from within B when the button is clicked.

This demonstrates the benefit of callback props: allowing a child component to trigger a state update in its parent component.

I d love to hear any additional insights or corrections on this topic! This is really my baby steps in React, and I found this concept a bit tricky to understand at first.

Why Should I Learn the React Library?

Ali AbdElbagi — Wed, 19 Mar 2025 20:14:49 +0000

When learning something new, you need to research it first to get a general understanding.

If you skip this step, you'll likely feel lost and confused.

This is actually the first step that author John Z. Sonmez mentions in his book

📖 "Soft Skills: The Software Developer’s Life Manual", and he calls it "Get The Big Picture."

So, when I decided to learn React, I didn’t really ask myself why I should learn it.

I just followed the Frontend Learning Path and saw React listed there.

But why should you learn React? 🤔

Here’s what makes React better than Vanilla JavaScript:

1️⃣ Reusability of Components = Cleaner & More Organized Code

With React, you can break the UI into components like buttons, cards, avatars, etc.
You write the code once and reuse it anywhere—so you don’t repeat yourself!

2️⃣ Faster UI Updates with Virtual DOM

React only updates the changed elements, not the entire DOM.
This makes UI updates much faster.
In Vanilla JS, too much DOM manipulation slows down performance.

3️⃣ Easier Data Handling with Hooks

React makes state management easier with useState Hook, while in Vanilla JS, you have to manually handle state updates.

Still not convinced? Here’s why React is worth learning:

✅ 1. React is in high demand in the job market.

✅ 2. Big companies use React—especially Meta (Facebook, WhatsApp Web, Instagram), which originally developed it.

✅ 3. Learning React opens the door to mobile app development with React Native (which I plan to learn next! 😉).

✅ 4. React is popular and has a strong ecosystem of tools and libraries.

So, do you think these are convincing reasons to learn React? 🤔💡

React #WebDevelopment #Frontend #JavaScript 🚀

Learning React Js

Ali AbdElbagi — Sun, 16 Feb 2025 14:13:57 +0000

I am going to share my React learning journey with you.

i need some advice from people who went in this path before me

i have good knowledge in HTML,CSS,JS,SASS,TAILWIND