React Hooks: useState vs useRef explained

Today while building a pagination component in React, I came across the use of Array.from() in JavaScript. The problem I was facing was simple: I wanted to show page numbers between the Previous and Next buttons. For example: Prev 1 2 3 4 5 Next At first, I was thinking about how to generate those numbers dynamically instead of writing them manually. That’s when I came across Array.from(). It helped me create an array of a specific length and then generate page numbers from it. Something like this: Array.from({ length: totalPages }, (_, i) => i + 1) This creates: [1, 2, 3, 4, 5] Which can then be mapped easily to render pagination buttons in React. A small thing, but it made pagination logic feel much cleaner and more dynamic. Am I understanding this correctly? Would love to know if there’s a better or more practical way you usually handle pagination numbers. #JavaScript #ReactJS #WebDevelopment #Frontend #Pagination

Today I learned about the useRef hook in React, and it’s actually very useful! What is useRef? It allows us to create a reference that persists across renders without causing re-renders. Key Uses: Access DOM elements directly Store mutable values without re-rendering Useful for focus, timers, and previous values Example: import { useRef } from "react"; function InputFocus() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus Input</button> </> ); } What I learned: Unlike state, updating useRef does NOT trigger a re-render. Excited to explore more React hooks! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #90DaysOfCode

💡 React Tip: Use Custom Hooks to Reuse Logic One pattern I use frequently in React projects is custom hooks. Instead of repeating API logic across components, I move it into a reusable hook. Example 👇 function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(setData); }, [url]); return data; } Usage: const users = useFetch("/api/users"); Benefits: • Cleaner components • Reusable logic • Easier testing Custom hooks are one of the most powerful patterns in React. What’s your favourite custom hook? #ReactJS #FrontendDevelopment #JavaScript

Built a Product Sorting Feature in React! I implemented dynamic sorting using useState and an array.sort() now products reorder instantly based on user selection. 🔹 Sort by Price (Low → High, High → Low) 🔹 Sort by Name (A → Z) 🔹 Used the spread operator to avoid mutating the original array This helped me understand how state + sorting works in real projects. 💻 Tech: React.js, JavaScript #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney

🚀 Day 5 of Building React Projects Today I built a Quiz Application using React.js. This project displays multiple-choice questions and calculates the final score based on user answers. ✨ Features: • Multiple-choice quiz questions • Instant answer selection • Score calculation after quiz completion • Simple and responsive UI 🛠 Tech Stack: React.js JavaScript HTML CSS 🌐 Live Demo: https://lnkd.in/dgSFAWTH 💻 Source Code: https://lnkd.in/dvQyFAha #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic

Top 5 React Design Patterns Every Developer Must Know! Learn how to write cleaner, reusable, and high-performing code in 2026 with ReactJS. Don’t miss these essential tips! 👉 Explore the blog: Complete Guide to React Design Patterns with Benefits https://lnkd.in/eTcdemjx 📞 +91 7935708014 🌐 https://lnkd.in/gw_TNE33 #ReactJS #WebDevelopment #DesignPatterns #HighPerformanceApps #FrontendDev #JavaScript #TechTips #LatitudeTechnolabs #HireReactJSDevelopers

Day 19: Custom Hooks in React If you want to write clean, reusable, and professional React code, you must understand Custom Hooks. 📌 What is a Custom Hook? A Custom Hook is a JavaScript function that starts with use and allows you to reuse React logic (state + effects) across multiple components. 👉 Example: useFetch, useAuth, useLocalStorage 📌 Why Custom Hooks are useful? Without custom hooks, we often repeat the same logic again and again ❌ Custom hooks help us: ✅ Reuse logic ✅ Keep components clean ✅ Reduce duplicate code ✅ Improve maintainability 📌 Example: Custom Hook (useCounter) import { useState } from "react"; function useCounter(initialValue = 0) { const [count, setCount] = useState(initialValue); const increase = () => setCount(prev => prev + 1); const decrease = () => setCount(prev => prev - 1); const reset = () => setCount(initialValue); return { count, increase, decrease, reset }; } export default useCounter; 📌 Using the Custom Hook import useCounter from "./useCounter"; function CounterApp() { const { count, increase, decrease, reset } = useCounter(5); return ( <div> <h1>{count}</h1> <button onClick={increase}>+</button> <button onClick={decrease}>-</button> <button onClick={reset}>Reset</button> </div> ); } 📌 Key Point Custom Hooks do not return JSX. They return logic (state + functions). 📌 Real-world Use Cases 🔥 Authentication Hook (useAuth) 🔥 API Fetch Hook (useFetch) 🔥 Theme Hook (useTheme) 🔥 LocalStorage Hook (useLocalStorage) #ReactJS #CustomHooks #FrontendDevelopment #JavaScript #WebDevelopment #LearnInPublic #CodingJourney

⚛️🚀Building reusable components is one of the best ways to write cleaner, scalable React code. In my latest blog, I break down how I created a dynamic, beginner‑friendly button component that adapts based on props—no more repeating the same markup. From conditional rendering to flexible class handling, this approach keeps your UI consistent and efficient. A great starting point for anyone improving their React workflow! https://lnkd.in/djJWMbZj #ReactJS #WebDevelopment #FrontendDev #ReusableComponents #JavaScript #CleanCode #ReactTips #TailwindCSS #CodingJourney #SoftwareEngineering

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? In React, 𝗳𝗿𝗮𝗴𝗺𝗲𝗻𝘁𝘀 "(<>...</>)" 𝗹𝗲𝘁 𝘆𝗼𝘂 𝗴𝗿𝗼𝘂𝗽 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗮𝗱𝗱𝗶𝗻𝗴 𝗲𝘅𝘁𝗿𝗮 𝗻𝗼𝗱𝗲𝘀 𝘁𝗼 𝘁𝗵𝗲 𝗗𝗢𝗠. Instead of wrapping elements in unnecessary "<div>" tags, fragments keep your markup 𝗰𝗹𝗲𝗮𝗻𝗲𝗿 𝗮𝗻𝗱 𝗹𝗶𝗴𝗵𝘁𝗲𝗿. 🔧 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝘂𝘀𝗲 𝗰𝗮𝘀𝗲𝘀: - Returning multiple elements from a component - Avoiding unnecessary DOM nesting - Keeping layouts easier to style Cleaner DOM = simpler layouts and better performance. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CodingTips #CleanCode #FullstackDeveloper