DEV Community: Mohammad Muzammil Khan 🧑‍💻

Demystifying React Hooks: Advanced Usage and Patterns

Mohammad Muzammil Khan 🧑‍💻 — Tue, 13 Feb 2024 13:28:27 +0000

Welcome, fellow React enthusiasts, to an exhilarating journey through the enchanted forest of React Hooks! 🌳 Today, we're going to take a deep dive into the murky waters of advanced usage and patterns. So strap in, grab your favorite beverage (be it coffee, tea, or a good ol' glass of water), and let's unravel the mysteries together! It's going to be a long one! ⚛️

useState: A Stateful Adventure

Ah, useState - the cornerstone of state management in the land of React. It's like discovering a treasure chest filled with stateful wonders! 💰

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Counter;

With useState, you can sprinkle your functional components with stateful goodness without the fuss of class components. It's like magic, but with fewer rabbits and more JavaScript!

useEffect: Taming Side Effects

Next up, we have useEffect - the master of side effects in the React kingdom. It's like wielding a powerful wand to manage the chaos of asynchronous operations! 🧙‍♂️

Without Dependencies:

import React, { useState, useEffect } from 'react';

const RandomFact = () => {
  const [fact, setFact] = useState('');

  useEffect(() => {
    fetch('https://uselessfacts.jsph.pl/random.json?language=en')
      .then(response => response.json())
      .then(data => setFact(data.text));
  }, []);

  return (
    <div>
      <p>Did you know? {fact}</p>
    </div>
  );
};

export default RandomFact;

Here, we fetch a random fact using useEffect without any dependencies, ensuring it runs only once after the initial render.

With Dependencies:

import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
    };

    fetchUser();
  }, [userId]);

  return (
    <div>
      {user ? (
        <div>
          <h2>{user.name}</h2>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserProfile;

In this example, useEffect is dependent on the userId prop, ensuring it updates whenever the prop changes.

useReducer: State Management Wizardry

Behold, useReducer - the sorcerer of state management! It's like wielding a mythical blade to slay the dragons of complex state transitions! 🐉

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
};

export default Counter;

With useReducer, you can wield the power of complex state management with elegance and grace.

useCallback and useMemo: Memoization Mastery

Introducing useCallback and useMemo - the dynamic duo of memoization magic! They're like the wizards of optimization, casting spells to keep your components lightning-fast! ⚡

With useCallback and useMemo, you can optimize your components by memoizing functions and values, ensuring they're only recalculated when necessary.

useCallback: Memoize Your Functions

Ah, useCallback - the maestro of memoization in the React realm! It's like having a magical spell to optimize your function references, ensuring they stay consistent across renders! 🧙‍♂️

import React, { useState, useCallback } from 'react';

const ExpensiveOperation = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    // Do something expensive with count
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClick}>Do Something Expensive</button>
    </div>
  );
};

export default ExpensiveOperation;

With useCallback, you can memoize your functions to ensure they're only recreated when their dependencies change. This can be particularly useful for optimizing performance in scenarios where expensive calculations or side effects are involved.

When to Use useCallback:

Event Handlers: When passing functions as props to child components, especially if they are passed to deeply nested components, useCallback can prevent unnecessary re-renders.
Optimizing Expensive Computations: When a function performs expensive computations or relies on external dependencies, memoizing it with useCallback can prevent unnecessary recalculations.

useMemo: Cache Your Values

useMemo - the guardian of value caching in React! It's like having a treasure chest to store your computed values, ensuring they're only recalculated when needed! 💰

import React, { useState, useMemo } from 'react';

const MemoizedComponent = ({ a, b }) => {
  const result = useMemo(() => {
    // Perform expensive computation with 'a' and 'b'
    return a + b;
  }, [a, b]);

  return <div>Result: {result}</div>;
};

export default MemoizedComponent;

With useMemo, you can memoize the results of expensive computations, preventing unnecessary re-renders and keeping your components lightning-fast.

When to Use useMemo:

Memoizing Expensive Computations: When a component's render method involves heavy calculations or data processing, useMemo can be used to memoize the result, ensuring it's only recalculated when its dependencies change.
Optimizing Rendering: When rendering large lists or complex data structures, useMemo can help optimize rendering performance by preventing unnecessary re-renders.

Comparison: useCallback vs useMemo

While both useCallback and useMemo are used for memoization in React, they serve slightly different purposes:

useCallback: Memoizes functions and returns a memoized version of the function, ensuring that the function reference remains consistent across renders. Use useCallback when you need to prevent unnecessary re-renders caused by passing new function references down the component tree.
useMemo: Memoizes the result of a computation and returns a cached version of the result, recalculating it only when its dependencies change. Use useMemo when you need to optimize expensive computations or data processing within your components.

Real-Life Example:

Imagine you have a complex form component where you have event handlers for various inputs. In this scenario, you can use useCallback to memoize the event handlers to prevent unnecessary re-renders caused by passing new function references down to child components.

On the other hand, if your form component has computed values based on user inputs or external data, you can use useMemo to memoize these values, ensuring they're only recalculated when necessary, thus optimizing the performance of your component.

I am planning to create a separate post going in details for these two. It will be a part of the "Demystifing React: Towards Intermediate Concepts" series so make sure to follow! 🧑‍💻

With useCallback and useMemo at your disposal, you now wield the power to optimize your React components like never before! Choose wisely, and may your components be lightning-fast and jank-free! ⚡️✨

useRef: Keeping Tabs on the DOM

Enter useRef - the guardian of mutable values in the land of React. It's like having a loyal squire to keep watch over your DOM elements! 🛡️

import React, { useRef } from 'react';

const FocusInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default FocusInput;

With useRef, you can easily access and manipulate DOM elements, manage focus, and even store persistent values between renders.

useLayoutEffect: Synchronizing with the Browser

Introducing useLayoutEffect, the virtuoso of synchronous updates. It's like having a backstage pass to the render lifecycle! 🎭

import React, { useLayoutEffect, useState } from 'react';

const MeasureWindow = () => {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const updateWidth = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', updateWidth);
    updateWidth(); // Initial measurement

    return () => window.removeEventListener('resize', updateWidth);
  }, []);

  return <div>Window Width: {width}px</div>;
};

export default MeasureWindow;

With useLayoutEffect, you can perform DOM mutations and measurements synchronously before the browser has a chance to paint, ensuring a smooth and jank-free user experience.

Bonus Round: useNavigate and useLocation

And now, for our bonus round, featuring useNavigate and useLocation - the dynamic duo of React Router v6! 🚀

import { useNavigate, useLocation } from 'react-router-dom';

const NavigationExample = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleClick = () => {
    navigate('/new-route');
  };

  return (
    <div>
      <p>Current URL: {location.pathname}</p>
      <button onClick={handleClick}>Navigate to New Route</button>
    </div>
  );
};

export default NavigationExample;

With useNavigate and useLocation, you can build dynamic, single-page application-style navigation experiences with ease. But wait, there's more! Let's level up our example by passing state and accessing it:

import { useNavigate, useLocation } from 'react-router-dom';

const NavigationWithState = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleClick = () => {
    navigate('/new-route', { state: { exampleState: 'Hello, React!' } });
  };

  return (
    <div>
      <p>Current URL: {location.pathname}</p>
      <button onClick={handleClick}>Navigate to New Route with State</button>
    </div>
  );
};

export default NavigationWithState;

In this enhanced example, we utilize the state option in the navigate function to pass state to the new route. Now, let's access this state in the destination component:

import { useLocation } from 'react-router-dom';

const NewRouteComponent = () => {
  const location = useLocation();
  const exampleState = location.state.exampleState;

  return (
    <div>
      <p>Received State: {exampleState}</p>
    </div>
  );
};

export default NewRouteComponent;

By accessing location.state in the destination component, we can retrieve the state passed from the previous route, enabling seamless communication between components across routes.

And there you have it, brave adventurers - a grand tour through the mystical realms of React Hooks 🎣! From state management sorcery to optimization wizardry, we've covered it all with examples and a sprinkle of magic. In the next post, we will touch beyond our friends useState and useEffect 🧑‍💻!

So go forth, wield your hooks with confidence, and may your React journey be filled with wonder and joy! ✨🔮

Understanding JSX: The Building Blocks of React

Mohammad Muzammil Khan 🧑‍💻 — Mon, 12 Feb 2024 11:47:38 +0000

Unraveling the JSX Mystery

Welcome to the JSX playground, where JavaScript meets XML in the world of React! 🎉 If you've ever wondered how React seamlessly blends JavaScript and HTML-like syntax, you're in for a treat. In this post, we'll unravel the mysteries of JSX and explore how it serves as the backbone of React's declarative UI paradigm.

What Exactly is JSX?

At its core, JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. But wait, isn't mixing JavaScript and HTML a recipe for spaghetti code? Fear not, dear developer! JSX introduces a delightful harmony between markup and logic, making your codebase more readable and expressive.

Let's dive into a quick example:

// JSX example
import React from 'react';

const Greeting = () => {
  const name = 'World';
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

In this snippet, we define a functional component called Greeting that renders a simple greeting message using JSX. Notice how we can embed JavaScript expressions within curly braces {} directly within our markup. It's like having the best of both worlds – the expressiveness of JavaScript and the familiarity of HTML.

JSX Under the Hood

But how does JSX work its magic under the hood? Behind the scenes, JSX gets transpiled into regular JavaScript code that React understands. That's right – those seemingly HTML-like tags are transformed into React.createElement() function calls, which create React elements representing the DOM nodes in your application.

Let's peek behind the curtain:

// JSX transpilation
import React from 'react';

const Greeting = () => {
  const name = 'World';
  return React.createElement('h1', null, `Hello, ${name}!`);
};

export default Greeting;

Surprise! 🎩✨ It's JavaScript all the way down! JSX may look like magic, but at its core, it's just syntactic sugar for creating React elements in a more intuitive and expressive manner. Here is the syntax:

// JSX code 
<type props>children</type>

// Under the hood
React.createElement(type, props, children);

Fragments: Keeping it Neat and Tidy

But what if you want to return multiple elements from a component without introducing unnecessary wrapper elements? Enter fragments – React's elegant solution to the conundrum of multiple sibling elements.

// Fragment example
import React from 'react';

const Greetings = () => {
  return (
    <>
      <h1>Hello</h1>
      <h2>Bonjour</h2>
    </>
  );
};

export default Greetings;

With fragments, you can group multiple elements without adding extra nodes to the DOM. They're like invisible containers that keep your JSX neat and tidy, all while maintaining the structure of your component.

JSX Gotchas and Tips

As you embark on your JSX journey, keep these nuggets of wisdom in mind:

JSX is Not HTML: While JSX may resemble HTML, it's important to remember that it's ultimately JavaScript. Don't be fooled by its familiar syntax – JSX operates within the JavaScript ecosystem and follows its rules and conventions.
Class vs. className: In JSX, use className instead of class to apply CSS classes to your elements. This is because class is a reserved keyword in JavaScript, and JSX aims to maintain consistency with the language.
Single Root Element: Each JSX expression must have a single root element. Wrap your JSX code in a <div> or a fragment (<>...</>) to ensure compliance with this rule.

With these insights in your toolkit, you're ready to conquer JSX like a true React virtuoso! 🚀

Conclusion

In this whirlwind tour of JSX, we've peeled back the layers of abstraction to reveal the inner workings of React's secret sauce. From its seamless integration with JavaScript to its role in building dynamic and expressive user interfaces, JSX stands as a testament to the power of innovation in web development.

So go forth, brave developer, and wield JSX with confidence! Whether you're crafting simple components or architecting complex UIs, let the magic of JSX be your guiding light in the ever-expanding universe of React.

Happy coding, and may your JSX be forever lint-free! 😄

Cover photo by Ketut Subiyanto

Getting Started with React: An Introduction to Component-Based Development

Mohammad Muzammil Khan 🧑‍💻 — Sun, 11 Feb 2024 09:15:47 +0000

Welcome to the wonderful world of React! 🎉 If you're new to the realm of web development or looking to dive into the exciting world of component-based development, you're in the right place. In this post, we'll embark on a journey to unravel the mysteries of React and explore how its component-based architecture can revolutionize your approach to building web applications.

What is React?

At its core, React is a JavaScript library for building user interfaces. But what sets React apart from traditional approaches to web development is its emphasis on component-based architecture. Instead of thinking about your application as a collection of interconnected pages, React encourages you to break down your UI into reusable, self-contained components. Think of each component as a building block that you can mix, match, and nest to create powerful user interfaces with ease.

The Power of Components

So, what exactly are components? In React, components are the building blocks of your UI. They encapsulate both the structure and behavior of a particular part of your application, making it easy to create modular, reusable code. Whether you're building a simple button or a complex form, components allow you to break down your UI into manageable pieces, each with its own distinct purpose and functionality.

// Example of a simple React component
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to the world of component-based development.</p>
    </div>
  );
};

export default MyComponent;

In the above example, we've defined a simple functional component called MyComponent that renders a basic greeting message. Notice how we can seamlessly mix HTML-like syntax with JavaScript to describe our UI. This is made possible by React's use of JSX (JavaScript XML), which allows you to write HTML-like code within your JavaScript files.

Building Your First React App

Now that we've dipped our toes into the world of React components, it's time to roll up our sleeves and build our first React app! Don't worry if you're feeling a bit overwhelmed – we'll start with a simple example to get you up and running in no time.

Setting Up Your Development Environment: Create React App vs. Vite

Before we can start building our React app, we need to set up our development environment. Let's explore two popular options: Create React App and Vite named "my-react-app".

Create React App

Create React App is a widely-used tool for bootstrapping React projects. It provides a pre-configured setup with everything you need to build a modern React application out of the box.

To create a new React project using Create React App, run the following command in your terminal:

npx create-react-app my-react-app

Once your project is set up, navigate to its directory and start the development server:

cd my-react-app
npm start

Vite

Vite is a blazing-fast build tool for modern web development. It offers instant server start and lightning-fast hot module replacement (HMR), making it an excellent choice for rapid prototyping and development.

To create a new React project using Vite, you can use the following command:

npx create-vite@latest my-react-app --template react

After initializing your project, navigate to its directory and start the development server:

cd my-react-app
npm install
npm run dev

Comparing Create React App and Vite

Performance: Vite boasts significantly faster build times compared to Create React App, thanks to its use of native ES modules and HMR.
Configuration: Create React App abstracts away configuration details, making it beginner-friendly but less customizable. Vite, on the other hand, provides more flexibility and allows for custom configurations.
Features: While Create React App offers a comprehensive set of features out of the box, Vite focuses on minimalism and extensibility, allowing developers to add only the features they need.

In summary, both Create React App and Vite are excellent choices for kickstarting your React projects. Choose Create React App for simplicity and ease of use, or opt for Vite if you prioritize performance and flexibility.

Now that you're familiar with both options, choose the one that best fits your development workflow and get ready to start building your React masterpiece!

Creating Your First Component

With our development environment up and running, let's create our first React component. Open up your favorite code editor and create a new file called HelloWorld.js in the src directory of your project:

// HelloWorld.js
import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

In the above code, we've defined a simple functional component called HelloWorld that renders a greeting message. Now, let's use this component in our main App.js file:

// App.js
import React from 'react';
import HelloWorld from './HelloWorld';

const App = () => {
  return (
    <div>
      <h1>My First React App</h1>
      <HelloWorld />
    </div>
  );
};

export default App;

And there you have it – your first React app is now up and running! 🚀

Conclusion

In this whirlwind tour of React, we've only scratched the surface of what's possible with this powerful library. From its intuitive component-based architecture to its seamless integration with modern JavaScript features, React opens up a world of possibilities for building dynamic, interactive web applications.

So, what are you waiting for? Dive into the world of React and unleash your creativity! Whether you're building a simple personal website or a complex web application, React's flexible and scalable architecture makes it the perfect choice for bringing your ideas to life.

Happy coding! 😊

Cover photo by Antonio Batinić

Unleashing the Power of Productivity: 7 Hacks I try to use myself!

Mohammad Muzammil Khan 🧑‍💻 — Sat, 10 Feb 2024 12:48:19 +0000

Hey there, code warriors and knowledge seekers! Welcome to my very first blog post—brace yourselves for a wild ride through the mystical realm of productivity. Today, we're unraveling the secrets that have helped me get myself together and that'll supercharge your coding sessions and quests. So, grab your favorite energy drink (or herbal tea, no judgment here), and let's dive in!

Wake and Code with Purpose: Rise && Shine && Code - Just like debugging code, starting your day with purpose sets the tone for success. Whether you're squashing bugs or unraveling the mysteries of the universe, having a clear mission fuels your journey.
Conquer the Scheduling Dragon: Ah, the scheduling dragon—fierce, unpredictable, and always hungry for time. But fear not! Tame this beast by mastering your schedule. Block out coding sessions, research dives, and, of course, snack breaks. Remember, even dragons need snacks!
Vanquish Distractions with Ninja-like Focus: In a world full of cat videos and meme threads, maintaining focus is like dodging incoming bugs—challenging but oh-so-rewarding. Equip yourself with noise-canceling headphones and unleash your inner ninja to banish distractions from your realm. Try to take a detox from the noise of not-so-social media.
Fuel Your Code, Fuel Your Mind: Just like your favorite code editor, your body and mind need fuel to function at their best. Stay hydrated, indulge in brain-boosting snacks, and remember to stretch those key-mashing muscles. After all, a well-nourished coder is a mighty coder!
Harness the Power of Prioritization: Ah, priorities—the bread and butter of every coder. Identify your top tasks, tackle them with gusto, and watch your productivity soar higher than a SpaceX rocket. Just remember to prioritize wisely—no one wants to launch a rocket without double-checking the code!
Forge Alliances: Embrace Collaboration (and Memes): Like modules in a well-structured codebase, collaboration makes everything better. Don't be afraid to reach out to your fellow devs for support, inspiration, an outsider look at the problem, or just a good old-fashioned coding meme. After all, laughter is the best syntax sugar!
Celebrate Victories, Big and Small: Every line of code committed, every breakthrough achieved—celebrate them all! Whether it's with a victory dance, a high-five to your coding buddy, or a celebratory commit message 🎉, revel in your triumphs. After all, you've earned it!

And there you have it, my fellow code warriors and knowledge seekers! Armed with these seven hacks, you're ready to embark on your epic journey toward coding greatness. So, grab your keyboard, fire up your IDE, and let's conquer the digital frontier together!

Until next time, happy coding and may your bugs be few and your commits be flawless! 🚀

Cover Photo by Lee Campbell.