React Internals: Components & Rendering

Handling Side Effects in React (useEffect) — Before & After While learning React, I faced a common side-effect issue. Calling a function directly inside a component makes it run on every re-render — even when clicking an unrelated button. This leads to unnecessary executions. 🟥 Before callOnce() was triggered on every render (Counter + Data). 🟩 After Using useEffect with a dependency array, the function now runs only when count changes. 💡 This is how useEffect helps us control side effects in React. Learning React step by step ⚛️ 🔗 Full explanation with code on Hashnode: 👉 https://lnkd.in/g8RfZ8J7 #ReactJS #useEffect #JavaScript #FrontendDeveloper #WebDevelopment #ReactHooks #CodingLife #LearnReact #DeveloperCommunity #100DaysOfCode #TechJourney #DevTips

I’ve been learning React for a while. Small projects, big lessons—here’s what I learned from a recent mini challenge. Instead of just watching tutorials, I’m focusing on small, practical projects that help me strengthen the basics. This Profile Card mini challenge was one of those, and it helped me work on: - Structuring React components better - Getting more comfortable with props - Writing cleaner JSX - Organizing a simple React project This mini challenge was inspired by a React course by Jonas Schmedtmann. (I mostly followed the styling from the challenge, focusing on building the React functionality first.) It’s a small project, but it shows steady progress—and that’s the goal. I’ll share updates when I can and keep building in the meantime. Repo - https://lnkd.in/dMZcDtzF Live preview - https://lnkd.in/daC5TmfM #React #FrontendDevelopment #WebDevelopment #LearningInPublic #JavaScript

The best way to learn React is by building. 🛠️ In my latest blog, ReactJS Simplified, I don't just explain the theory behind Hooks and State; I show you how to apply them in real projects. By the end of this guide, you’ll have built: 📁 A dynamic Filter Menu 🎡 A functional Carousel 📝 A Grocery Bud task manager Master the basics, understand the advanced hooks (useRef, useReducer, Custom Hooks), and start building today. Full Guide here: 🔗 https://lnkd.in/gdTFuDKT #ReactJS #WebDevelopment #JavaScript #Frontend #Programming #WebDev #CodingTutorial

Session 75 Covered | Cohort 2.0 **********TASK 5(React.js): User Generator with Remove Functionality********** In this session, I built a user generator app in React.js with a remove feature, focusing on clean state management and component structure. What I learned 👇 🖱️ Created a form with 4 inputs using two-way binding via useState 🖱️ Handled form submission with a formHandler and preventDefault() 🖱️ Managed users using an array state allUsers 🖱️ Added new users without mutating state using the spread operator 🖱️ Built a separate Card component and rendered it using allUsers.map() 🖱️ Implemented remove functionality by copying the state array, removing the selected index, and updating state A simple project, but it covered multiple core React concepts working together. Sheryians Coding School #ReactJS #FrontendDevelopment #useState #ReactForms #TailwindCSS #LearningInPublic #JavaScript

🚨 This small React concept saved me from BIG bugs 🚨 While building a Like Button component in React, I hit a confusing issue 🤯 Clicks were not updating correctly during fast interactions. That’s when I learned an important React rule 👇 👉 If new state depends on previous state, always use a callback updater. ❌ Risky way setCount(count + 1); ✅ Safe & correct way setCount(prev => prev + 1); 📌 Why? Because React state updates are asynchronous & batched, and the callback always receives the latest state, preventing stale-value bugs. To apply this learning, I built a Like Button component ❤️ Toggle heart icon Count total clicks Smooth state updates using callback updaters 🎥 I’ve attached a short video demo of the Like Button in action. Learning React step by step — concepts + practice 🔁 If you’re also learning React, this tip will save you time and frustration! 💬 Have you faced state update bugs before? #ReactJS #JavaScript #WebDevelopment #LearningInPublic #Delta6.0 #CFBR

🌟 Small win today - feeling way more confident with strings in JavaScript! 🚀 I’ve been focusing on the fundamentals, and here’s what’s really clicking for me now: 1. String length: Using .length to count characters has already helped me think about validating user input, like making sure passwords or usernames meet minimum requirements. 2. Concatenation: Combining strings with the + operator or (even better) template literals makes building dynamic messages so much smoother and readable - no more messy quote juggling! 3. String comparison: I now fully get why === is case-sensitive. A single uppercase letter makes two strings completely different in JavaScript’s eyes - super important for things like login checks where precision matters. 4. Comments: Adding clear single-line (//) and multi-line (/* */) comments is becoming a habit. Plus, using keyboard shortcuts in VS Code to toggle them instantly is saving me tons of time and keeping my code organized. These basics are starting to feel like second nature, and I can already see how they’ll make my future projects cleaner and less buggy. Special Thanks to Joseph Brendan & The Dev&Design React Bootcamp. What’s a JavaScript fundamental that clicked for you recently? Always love hearing your stories! 👇 #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearnInPublic

🔄 Learning isn’t always about something new — sometimes it’s about reinforcing the journey Today, instead of picking up a new concept, I spent time revisiting and reflecting on everything I’ve learned so far in my JavaScript & React journey. So far, I’ve worked through 👇 🔹 JavaScript fundamentals & execution model 🔹 Scope, closures, and asynchronous behavior 🔹 Event loop, promises, and concurrency 🔹 Functional programming (map, filter, reduce) 🔹 React basics — project structure & JSX 🔹 Built a small React To-Do List app This pause helped me see how these pieces connect and where I need to strengthen my understanding before moving ahead. Progress isn’t always visible day by day, but it’s definitely happening 🚀 Trusting the process and staying consistent. 👉 How do you usually handle days when learning feels slow? #LearningInPublic #JavaScript #ReactJS #FrontendDevelopment #StudentDeveloper #Consistency #BuildInPublic #ProgrammingJourney #nodejs

Day 65 of Frontend Domination – Cohort 2.0 🚀 Today marked the beginning of React, guided by Sarthak Bhaiya, and the session focused on building the right JavaScript foundation before jumping into React. What we covered today: • Why strong JavaScript fundamentals are mandatory before learning React • A clear explanation of the Spread Operator and why it’s so important in modern JavaScript • How the spread operator helps in copying and updating data efficiently • Understanding export and import in JavaScript • Difference between default export and named export • How files communicate with each other using proper import/export syntax Today’s class was intentionally kept basic but extremely important. Without these concepts, React can feel confusing later. This session made it very clear that learning fundamentals properly saves a lot of struggle ahead. Feeling excited and confident to finally step into the React world 💙⚛️ #FrontendDomination #ReactJS #JavaScript #WebDevelopment #LearningInPublic #Cohort2 #FrontendJourney Sheryians Coding School Sarthak Sharma

At one point, useEffect felt like the answer to almost every problem in React. Over time, I’ve stopped reaching for it by default — here’s why: 🧠 It hides complexity – logic that looks simple often becomes hard to reason about. 🔁 It’s easy to misuse – dependency arrays can introduce subtle bugs and unexpected re-renders. 🧩 Not everything needs an effect – a lot of logic fits better in event handlers, derived state, or custom hooks. 🧼 Cleaner components – fewer effects usually means more predictable and readable code. I still use useEffect when it makes sense — but learning when not to use it made my React code much easier to maintain. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks #CodingTips #SoftwareEngineering

📘 Understanding the useEffect Dependency Array (Finally!) After watching a long and technical lecture on React’s useEffect, I realized that the real confusion was not the hook itself—but the dependency array. Here’s how I finally understood it 👇 The dependency array usually contains state or props. React watches these values, and when any of them change, the useEffect runs again. That’s it. No magic. No overthinking. For example: Empty array [ ] → effect runs only once [state] → effect runs when state changes No array → effect runs on every render The most important realization for me was this: 👉 useEffect does not cause re-renders 👉 State/props changes cause re-renders, and useEffect reacts to those changes Once this clicked, everything became much clearer. Sharing this in case it helps someone who’s currently struggling with React hooks like I was Learning step by step. #ReactJS #useEffect #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment