most React developers use useCallback wrong. not because they don't understand it. because they were taught the wrong rule. the rule they heard: "wrap functions in useCallback to prevent unnecessary re-renders. the actual rule: useCallback only helps when you pass that function to a child component wrapped in React.memo or as a dependency in useEffect. that's it. useCallback doesn't prevent re-renders of the parent. it just memoizes the function reference so children don't see a "new" function every render. three questions to ask before reaching for useCallback: - is this function passed to a memoized child component? - is this function a dependency in a useEffect? - is this function expensive to recreate? if none of these just write the function normally. the best optimisation is usually the one you don't add. #reactjs #typescript #webdevelopment #buildinpublic #javascript
When to Use useCallback in React
More Relevant Posts
-
The Great Debate: Formik or React Hook Form? Both are industry favorites, but they offer two very different approaches to handling forms in React. While one is praised for its stability and ease of use, the other is the go-to for performance and minimal re-renders. Most developers have a strong preference, but is there really a "winner"? Which one is currently in your tech stack, and why did you choose it over the other? 👇 #ReactJS #FrontendDevelopment #WebPerformance #ProgrammingTips #Javascript
To view or add a comment, sign in
-
Most developers think the key prop in React is just for lists. But one small mistake with keys can silently destroy your frontend performance and increase load time without you realizing it. I’ve seen apps where random keys caused full component remounts on every render — and debugging that was painful. If you're using Math.random() or changing keys unnecessarily this post might save you hours of debugging. #react #frontend #reactjs #javascript #webdevelopment #frontenddeveloper #softwareengineering #codingtips
To view or add a comment, sign in
-
🔹 React Basics: Props vs State (Explained Simply) When starting with React, one of the most important concepts to understand is the difference between Props and State. Here’s a simple breakdown 👇 👉 Props (Properties) • Passed from parent to child components • Read-only (cannot be modified) • Used to make components reusable 👉 State • Managed within the component • Can be updated using hooks like `useState` • Controls dynamic data and UI behavior 💡 In short: Props help you pass data, while State helps you manage data. Understanding this difference is key to building scalable and maintainable React applications. If you're learning React, mastering these fundamentals will make your journey much smoother 🚀 💬 What topic should I cover next in React? #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic #SoftwareDevelopment #CodingJourney #Developers
To view or add a comment, sign in
-
-
One small React habit that improved my code a lot: Stop putting everything in one component. Earlier, I used to write large components with too much logic. It worked… but became messy very quickly. Now I try to: • Break UI into smaller components • Keep logic separate • Reuse components wherever possible This makes the code cleaner and easier to scale. If you're learning React, start thinking in components, not pages. #reactjs #frontend #webdevelopment #javascript
To view or add a comment, sign in
-
-
This shows that the JavaScript dependencies of an R/Shiny app can be automatically inserted on the client side when necessary. No need to ask the package users to do it. 😇 #rstats #shiny #javascript
To view or add a comment, sign in
-
-
💡 Today I learned something that changed how I think about performance in React… I was working on a simple search input, and everything seemed fine… until I realized something Every single keystroke was triggering an API call That means: 👉 Too many requests 👉 Unnecessary load on the server 👉 A less smooth user experience That’s when I remembered 𝗱𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴 Instead of calling the API on every key press, I added a small delay. Now, the function only runs when the user stops typing for a moment ✨ The result? Fewer API calls Better performance Cleaner and more efficient code Sometimes, it’s not about big changes… but small improvements that make a real difference Have you ever faced this kind of issue? 👇 #React #WebDevelopment #JavaScript #Frontend #Performance #LearningJourney
To view or add a comment, sign in
-
I recently worked on a project where I had to optimize the performance of a Next.js application It was a real challenge, and I made a mistake that cost me hours of debugging I was trying to implement a complex UI pattern using React But I forgot to memoize a component, causing it to re-render unnecessarily As I was debugging, I had a realization that I should have used the React DevTools to identify the issue earlier This would have saved me a lot of time and frustration A practical takeaway from this experience is to always use the React DevTools to identify performance bottlenecks It's a simple yet effective way to optimize the performance of your React applications What's the most common mistake you've made when optimizing the performance of a React application #NextJs #React #PerformanceOptimization #FrontendEngineering #UIPatterns #ReactDevTools #JavaScript #WebDevelopment #OptimizationTechniques
To view or add a comment, sign in
-
🚀 React Series – Day 17 React Router – Navigating Without Reloading the Page Modern web applications don’t reload the page every time you navigate; they feel fast and seamless. This is possible because of client-side routing, and in React, it’s handled using React Router. Instead of requesting a new page from the server, React updates the UI based on the URL. Key ideas: • Different URLs map to different components • Navigation happens instantly without a full page reload • Improves user experience significantly 👉 This is what makes React apps behave like real applications instead of traditional websites. #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #learnreact #30daysofcode #programming #reactinterview #react #coding
To view or add a comment, sign in
-
React devs — this is why you’re running out of API limits. Most React beginners make this mistake with useEffect.... And it looks completely harmless. 𝗧𝗵𝗲𝘆 𝘄𝗿𝗶𝘁𝗲 𝘁𝗵𝗶𝘀: useEffect(() => { fetchData() }) No dependency array. 𝗧𝗵𝗲 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗶𝘀, This runs after EVERY render. Not once. Not on mount. 𝗘𝗩𝗘𝗥𝗬 render. If your effect updates state: it triggers a re-render, which re-runs the effects causing infinite API calls. That's when your app breaks. 𝗧𝗵𝗲 𝗳𝗶𝘅 𝗶𝘀 𝘀𝗶𝗺𝗽𝗹𝗲: useEffect(() => { fetchData() }, []) // empty array = runs once on mount 𝗛𝗲𝗿𝗲'𝘀 𝘄𝗵𝗲𝗻 𝗲𝗮𝗰𝗵 𝘃𝗲𝗿𝘀𝗶𝗼𝗻 𝗿𝘂𝗻𝘀: → No array = runs after every render → Empty array = runs once on mount → [value] = runs when value changes Save this — you 𝗪𝗜𝗟𝗟 hit this bug again. Which useEffect mistake have you made before? Drop it below 👇 Follow for more React tips that save you hours of debugging. #reactjs #webdevelopment #javascript #MERN
To view or add a comment, sign in
-
-
Understanding the difference between JavaScript and Node.js is essential for modern web development. JavaScript powers dynamic client-side experiences in the browser, while Node.js enables scalable server-side applications using the same language. Mastering both doesn’t just make you versatile — it opens the door to becoming a true full-stack developer, capable of building seamless, end-to-end solutions. 🚀 #JavaScript #NodeJS #WebDevelopment #FullStackDevelopment #Programming #TechSkills #CareerGrowth #DevelopersJourney #CodingLife #SoftwareEngineering
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
That’s a great point. When I started, I was also somewhat confused about when I should use it. I think this happens because most of us learn how to use React, but things only become clear once we understand how it works under the hood.