Abdullahi Abdulganiy @_AbdullahiAg

Joined January 2017

Tweets

377
Followers

51
Following

513
Likes

507

Abdullahi Abdulganiy @_AbdullahiAg

3 months ago

🎯 Day 100 – #100DaysOfReact 100 days of building with React! ⚛️ ✅ Mastered hooks ✅ Built real-world projects ✅ Learned routing, context, and Vite ✅ Grew every single day Grateful for the journey. Consistency beats perfection! #ReactJS #WebDev #DevJourney

0 0 0 4 0

Abdullahi Abdulganiy @_AbdullahiAg

3 months ago

🧩 Day 99 – #100DaysOfReact Exploring the React Context API! ✅ Avoids prop drilling ✅ Shares state globally ✅ Great for themes, auth, and more Create ➝ Provide ➝ useContext 🔁 A clean way to manage app-wide state! #ReactJS #WebDev #StateManagement

0 0 0 9 0

Abdullahi Abdulganiy @_AbdullahiAg

3 months ago

🧠 Day 98 – #100DaysOfReact State classification in React: 🔹 Local (useState) 🔹 Global (Context, Redux) 🔹 Server (React Query, SWR) 🔹 URL (react-router) Classifying state = better architecture! 🛠️ #ReactJS #WebDev #StateManagement

0 0 0 28 0

Abdullahi Abdulganiy @_AbdullahiAg

3 months ago

🚀 Day 97 – #100DaysOfReact Set up a React project with Vite ⚡ Fast dev server ✅ Instant HMR ✅ Optimized builds ✅ npx create-vite@latest my-app -- --template react #ReactJS #ViteJS #WebDev

0 0 0 10 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 97 – #100DaysOfReact Single Page Applications (SPAs) 🧭 SPAs in React = seamless UX, fast navigation, no reloads! Use `react-router-dom`, manage state with Context/Redux, fetch data dynamically. React + SPA = modern web magic ✨ #ReactJS #SPAs #WebDev

0 0 0 22 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 96 of #100DaysOfReact 🚦 Learning React Routing with `react-router-dom`: ✅ Define routes with <Route> ✅ Wrap app in <BrowserRouter> ✅ Navigate using <Link> Client-side routing = smooth UX 🔄 #ReactJS #JavaScript #WebDev #Frontend

0 0 0 27 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 95 of #100DaysOfReact ⚛️ Learning `useReducer` in React: ✅ Great for complex state ✅ Uses reducer + dispatch Example: const [state, dispatch] = useReducer(reducer, initialState) Scalable state management! 💡 #ReactJS #JavaScript #WebDev

0 0 1 21 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 94 of #100DaysOfReact `useState` vs `useReducer`: ✅ `useState` = simple, quick state ✅ `useReducer` = complex logic, better structure Choose based on your needs! #ReactJS #JavaScript #Frontend #WebDevelopment

0 0 0 12 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 93 - #100DaysOfReact: Regular function Vs Custom hook Regular functions perform tasks but don’t use React hooks Custom hooks use React hooks to encapsulate reusable stateful logic, integrate with lifecycle, and share behavior across components #ReactJS #WebDev #JavaScript

0 0 0 12 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 92 - #100DaysOfReact: State Vs Refs State manages data that affects UI and triggers re-renders, while refs are used for direct DOM access or mutable values without triggering re-renders. Use state for dynamic data and refs for non-UI tasks. #ReactJS #WebDev #JavaScript

0 0 0 4 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 91 - #100DaysOfReact: Refs in React allow direct access to DOM elements or components. Use `useRef` for functional components to interact with elements (e.g., focusing inputs). Avoid using refs for state to maintain UI consistency. #ReactJS #WebDev

0 0 0 5 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 90 - #100DaysOfReact: Cleanup functions in useEffect are crucial for cleaning up side effects like timers, subscriptions, and event listeners. Return a cleanup function to avoid memory leaks and improve performance. #ReactJS #WebDev #JavaScript

0 0 0 20 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 89 - #100DaysOfReact: The useEffect dependency array controls when effects run. Empty array runs once on mount. Add variables to run when they change. Omitting it runs after every render—can hurt performance. Use it wisely! #ReactJS #WebDev

0 0 1 9 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 88 - #100DaysOfReact: Effects in React are side operations like data fetching or DOM updates managed by useEffect. Use dependency arrays to control execution and cleanup functions to prevent memory leaks. #ReactJS #WebDev #JavaScript

0 0 0 15 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 87 - #100DaysOfReact: Event Delegation: Event delegation in React attaches a single listener to the parent element, improving performance and reducing memory usage. It works seamlessly with dynamic content and simplifies event management. #ReactJS #WebDev #JavaScript

0 0 1 5 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 86 - #100DaysOfReact: Event binding in React: 1. In class components, bind event handlers to "this" in the constructor. 2. In functional components, use arrow functions. 3. Optimize performance with "useCallback" for fewer re-creations. #ReactJS #WebDev

0 0 0 2 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 85 - #100DaysOfReact: Synthetic events in React provide a cross-browser wrapper for native events, ensuring consistent behavior. They're pooled for performance, preventing memory leaks. Common events like `onClick` are handled via synthetic events. #ReactJS #WebDev

0 0 0 19 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 84 - #100DaysOfReact: React handles events with synthetic events for cross-browser compatibility. Events are written in camelCase (e.g., onClick). React uses event delegation to optimize performance. Functional components use hooks for event handling. #ReactJS #WebDev

0 0 0 9 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 83 - #100DaysOfReact: Steps for event delegation in React: 1. Identify the parent element. 2. Add event listener to parent. 3. Use `event.target` to identify child. 4. Handle the event logic. 5. Optimize with React’s synthetic events. #ReactJS #WebDev

0 0 0 6 0

Abdullahi Abdulganiy @_AbdullahiAg

4 months ago

Day 82 - #100DaysOfReact: Event delegation in React uses a single event listener on the parent to handle events for child elements, improving performance, memory usage, and supporting dynamic content. React handles this efficiently with synthetic events. #ReactJS #WebDev