Understanding useState vs useEffect in React ⚛️ A simple difference that made things much clearer for me: useState → used to store and update data useEffect → used to perform actions after data changes Once this clicked, React started making a lot more sense. Small concepts, big impact ⚡ #ReactJS #FrontendDevelopment #JavaScript #ReactHooks
useState vs useEffect in React
More Relevant Posts
-
Day 6 — Find Second Largest Number in an Array (JavaScript) Problem Write a function to find the second largest number in an array. Example Input: [10, 5, 8, 20] Output: 10 Approach First find the largest number, then find the largest number smaller than it. Code function secondLargest(arr){ let largest = -Infinity let second = -Infinity for(let i = 0; i < arr.length; i++){ if(arr[i] > largest){ second = largest largest = arr[i] } else if(arr[i] > second && arr[i] !== largest){ second = arr[i] } } return second } console.log(secondLargest([10,5,8,20])) Alternative Approach function secondLargest(arr){ let sorted = [...new Set(arr)].sort((a,b) => b-a) return sorted[1] } What I Learned How to track two maximum values in a single loop. #javascript #frontenddeveloper #codingpractice #webdevelopment
To view or add a comment, sign in
-
-
The React pattern that eliminated 80% of my useEffect calls Most useEffect calls are just bad data derivation. Here is the derived state pattern that cleaned up years of accumulated complexity in my React components. Full breakdown (6 min read) → https://lnkd.in/gsS5RKC4 #ReactJS #Frontend #JavaScript #TypeScript #WebDev #UIEngineering
To view or add a comment, sign in
-
-
you called setState twice. expected +2. got +1. both calls read the same stale count from the current render. they don't compound. they both say "set to 1." welcome to React. why it breaks: state updates don't happen immediately. they're scheduled. so count is still 0 inside your function no matter how many times you call setState. both calls read 0. both set to 1. result: 1. the Fix: use functional updates. each call gets the previous result and builds on it. The code : #reactjs #javascript #webdevelopment #buildinpublic #typescript
To view or add a comment, sign in
-
-
🚀 Just published a new React package: table-components-react A lightweight and customizable table component built for modern React applications. Designed to simplify data rendering while keeping flexibility for real-world use cases. ✨ Highlights: • Easy to integrate • Customizable columns & data • Clean and reusable components • Developer-friendly API Check it out on npm: https://lnkd.in/dcvj9X-V Feedback and contributions are welcome! #ReactJS #npm #opensource #frontend #javascript
To view or add a comment, sign in
-
Day [7] of 111 days challenge Code for Change useSearchParams() (Client Component) This is a hook used inside client components .for example, a search bar that updates as the user types. "use client" import { useSearchParams } from "next/navigation" export default function SearchBar() { const searchParams = useSearchParams() const query = searchParams.get("q") } So when should you use which? Fetching/filtering data on the server? => use searchParams (prop) Building interactive UI that updates the URL? => use useSearchParams() (hook) #NextJS #WebDevelopment #React #LearningInPublic #JavaScript #BeginnerDeveloper #AppRouter #111DaysOfCode
To view or add a comment, sign in
-
-
I once fixed a performance issue… Didn’t change logic. Didn’t add caching. Just replaced a loop with Promise.all() Speed went 📈 Sometimes the problem isn’t scale… it’s how you write async code. #SoftwareEngineering #NodeJS #JavaScript #Performance #DevTips
To view or add a comment, sign in
-
-
🧠 React Doesn’t Update State Immediately (Even Inside the Same Function) Most people know state is async. But here’s the part many don’t realize 👇 Example const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); if (count === 0) { console.log("Still zero?"); } } You click the button. Expected: count = 1 But inside that function… 👉 count is still 0 🔍 Why? Because React doesn’t update state inside the current render cycle. It schedules the update and re-renders later. 🧠 The tricky part Even this won’t work: setCount(count + 1); setCount(count + 1); 👉 Final result = +1, not +2 ✅ Correct way setCount(prev => prev + 1); setCount(prev => prev + 1); Now React uses the latest value. 🎯 The Real Insight State inside a function is a snapshot, not a live value. 💥 Why this matters This causes: Unexpected conditions Wrong calculations Confusing bugs #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #CodingTips #LearningInPublic
To view or add a comment, sign in
-
React Query changed how I think about state — and I have not used Redux since The server state vs client state distinction that React Query makes explicit replaced my need for Redux entirely. Here is the mental model shift. Full breakdown (7 min read) → https://lnkd.in/gcUhHrV2 #ReactJS #Frontend #JavaScript #TypeScript #WebDev #UIEngineering
To view or add a comment, sign in
-
-
One React topic that gets messy fast: forms. Not because inputs are hard. Because real-world forms are. Validation, async errors, dynamic fields, reusable logic: that’s where clean React patterns matter. I broke it down here 👇 https://lnkd.in/dFWB3Phc #reactjs #frontenddevelopment #javascript #webdevelopment #softwareengineering #buildinpublic
To view or add a comment, sign in
-
-
JavaScript Closures are confusing… until they’re not ⚡ Most developers memorize the definition but struggle to actually understand it. Let’s simplify it 👇 💡 What is a closure? A closure is when a function 👉 remembers variables from its outer scope even after that scope is finished 🧠 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 fn(); // 3 ⚡ Why this works: inner() still has access to count even after outer() has executed 🔥 Where closures are used: • Data hiding • State management • Event handlers • Custom hooks in React #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development