Shankar Yadav’s Post

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

One React Hook changed the way I build dynamic forms. And honestly, it saved me from a lot of messy code. Before using useFieldArray in React Hook Form, I used manual state for dynamic fields. At first, it looked manageable. But as the form started growing, the logic became messy very quickly. Adding fields, removing fields, keeping values in sync, and handling validation started taking more effort than expected. The feature was simple, but the code was not. Then I started using useFieldArray. That is when I understood how useful this hook is in real projects. It makes dynamic form handling much cleaner. Add and remove actions become easier. The structure feels more organized. And the code becomes easier to maintain. For me, the biggest lesson was simple: Sometimes a problem feels difficult not because it is truly hard, but because we are solving it in a harder way. If you work with dynamic forms in React, this hook is worth understanding deeply. What React Hook made your code noticeably cleaner? #ReactJS #JavaScript #FrontendDevelopment #ReactHookForm #SoftwareEngineering #WebDevelopment #NextJS

Most React Native codebases become a mess by month 3. Not because the developer was bad. Because nobody agreed on a structure from day one. Here's the folder structure I use on every project 👇 src/ ├── components/  → reusable UI only ├── screens/   → one file per screen ├── navigation/  → all route config here ├── hooks/    → useAuth, usePlayer, useBooking ├── store/    → Redux slices ├── services/   → ALL API calls live here ├── utils/    → helpers & constants ├── types/    → TypeScript interfaces └── assets/    → images & fonts 3 rules I never break: 🔴 API calls never go inside components 🟡 Every colour lives in theme.ts — nowhere else 🟢 Types folder grows with the project — never skip it Junior me put everything in /components. 6 months later it had 60 files and zero logic separation. Never again. Save this before your next project 👇 #ReactNative #TypeScript #CleanCode #MobileDev #JavaScript #2026

🚀 Understanding Functional vs Class Components in React — Simplified! In React, everything revolves around components. But there are two types: 👉 Functional Components 👉 Class Components So… which one should you use? 💡 What are Functional Components? 👉 Simple JavaScript functions that return JSX function Greeting() { return <h1>Hello, React!</h1>; } ✅ Cleaner syntax ✅ Easier to read ✅ Uses Hooks (useState, useEffect) ✅ Preferred in modern React 💡 What are Class Components? 👉 ES6 classes that extend React.Component class Greeting extends React.Component { render() { return <h1>Hello, React!</h1>; } } 👉 Uses lifecycle methods instead of hooks ⚙️ Key Differences 🔹 Functional: Uses Hooks Less boilerplate Easier to maintain 🔹 Class: Uses lifecycle methods More complex syntax Harder to manage state 🧠 Real-world use cases ✔ Functional Components: Modern applications Scalable projects Cleaner architecture ✔ Class Components: Legacy codebases Older React apps 🔥 Best Practices (Most developers miss this!) ✅ Prefer functional components in new projects ✅ Use hooks instead of lifecycle methods ✅ Keep components small and reusable ❌ Don’t mix class and functional patterns unnecessarily ⚠️ Common Mistake 👉 Overcomplicating simple components with classes // ❌ Overkill class Button extends React.Component { render() { return <button>Click</button>; } } 👉 Use functional instead 💬 Pro Insight React today is built around: 👉 Functions + Hooks, not classes 📌 Save this post & follow for more deep frontend insights! 📅 Day 7/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

🚀 Day 7 of Building React Projects Today I built a Weather Application using React.js. This project allows users to search for any city and view the current weather information using a weather API. ✨ Features: • Search weather by city name • Display temperature and weather condition • Shows weather icon • Simple and responsive UI • Real-time data using API 🛠 Tech Stack: React.js JavaScript HTML CSS Weather API 💻 Source Code: https://lnkd.in/dasKibUN #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic

𝗗𝗮𝘆 𝟭𝟵/𝟵𝟬 : 𝗘𝘅𝗽𝗹𝗼𝗿𝗶𝗻𝗴 𝘁𝗵𝗲 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗝𝗦! React JS is an open-source JavaScript library that's become a go-to for building modern web applications.  Here are some of the key features that make React JS so popular among develops  𝟭. 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁-𝗕𝗮𝘀𝗲𝗱 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 Build reusable and independent UI components, making code more modular and maintainable.  𝟮. 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠 Improves performance by updating only the changed parts of the UI instead of reloading the entire page  𝟯. 𝗝𝗦𝗫 (𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗫𝗠𝗟) Allows writing HTML-like syntax inside JavaScript, making UI development more intuitive.  𝟰. 𝗨𝗻𝗶𝗱𝗶𝗿𝗲𝗰𝘁𝗶𝗼𝗻𝗮𝗹 𝗗𝗮𝘁𝗮 𝗙𝗹𝗼𝘄  Ensures better control over data and makes applications easier to manage and debug.  𝟱. 𝗗𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝘃𝗲 𝗨𝗹 Focus on “what to show” rather than “how to update”, making code predictable and easier to debug. React is widely used to build 𝗦𝗶𝗻𝗴𝗹𝗲 𝗣𝗮𝗴𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 (𝗦𝗣𝗔) for faster and smoother user experiences. Check out the infographic below to learn more about these features in detail. #ReactJS #WebDevelopment #JavaScript #Frontend #Programming #90DaysOfCode

A lot of people constantly ask me what React Hooks actually are, and the best way to think about Hooks and JavaScript concepts in general is to look at what problem they were trying to fix. For example, before React Hooks, people would create a Container Component and a Presentational Component. The Container Component would retrieve data, like making a fetch request, and then pass that data down to the Presentational Component, which was usually a pure function that returned some UI, like a div with styling, and accepted that data as props. This pattern helped create a standard for how data was retrieved in React and enforced separation of concerns, but it ended up being too boilerplate heavy for most people. So Hooks were introduced to let us hook into components directly, allowing us to load data as a side effect inside a function while still maintaining separation of concerns without needing extra components. #ReactJs #JavaScript #JavaScriptHooks

React Custom Hook — Clean Code Tip 🚀 If you repeat the same logic in multiple components, it's time to create a custom hook. Example: API fetch hook function useFetch(url){ const [data,setData] = useState([]) useEffect(()=>{ fetch(url) .then(res=>res.json()) .then(setData) },[url]) return data } Now reuse anywhere: const users = useFetch('/api/users') Benefits: • Reusable logic • Clean components • Easy maintenance This is how senior React developers write code. Follow for daily React learning 🚀 #reactjs #customhook #frontenddeveloper #mernstack #javascript