DEV Community: Taaha hussain Khan

Understanding useState and useEffect in React

Taaha hussain Khan — Mon, 17 Apr 2023 19:32:28 +0000

React hooks are a powerful way to manage state and side effects in functional components. In this post, we'll explore two of the most commonly used hooks: useState and useEffect.

First, let's start with useState. This hook allows us to add state to our functional components. Here's an example:


jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
In this example, we use useState to create a count state variable and a setCount function to update the state. When the user clicks the “Increment” button, the setCount function is called with the new count value.

Next, let’s look at useEffect. This hook allows us to run side effects in our functional components. Here’s an example:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};
In this example, we use useEffect to fetch user data from an API when the component mounts. The second argument to useEffect is an array of dependencies. In this case, we only want to run the effect when the userId prop changes.

By using useState and useEffect, we can manage state and side effects in our functional components. Happy coding!

Routing in React with React Router

Taaha hussain Khan — Mon, 17 Apr 2023 19:13:48 +0000

Routing is an essential part of any single-page application (SPA), and React is no exception. In this post, we'll explore how to implement routing in a React app using the popular react-router library.

First, let's start by installing react-router-dom:


sh
npm install react-router-dom
Next, we’ll need to wrap our app in a BrowserRouter component and define our routes using the Route component:

import { BrowserRouter, Route } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </BrowserRouter>
);
Each Route component defines a path and a component to render when the user navigates to that path. In the example above, when the user navigates to the root path (/), the Home component will be rendered. When the user navigates to /about, the About component will be rendered, and so on.

We can also use the Link component to create links between pages in our app:

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

const Navigation = () => (
  <nav>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
  </nav>
);
By using react-router, we can easily implement routing in our React app. Happy coding!

Efficiently Rendering Lists in React

Taaha hussain Khan — Mon, 17 Apr 2023 18:56:18 +0000

Rendering large lists of data can be a challenge in any front-end framework, and React is no exception. In this post, we'll explore some techniques for efficiently rendering lists in React.

First, let's start with the basics. When rendering a list of items in React, it's important to include a key prop on each list item. This helps React keep track of which items have changed and only re-render those items. The key prop should be a unique identifier for each item in the list.


jsx
const MyList = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);
Another technique for improving the performance of list rendering is to use virtualization. This involves only rendering the visible items in the list and dynamically updating the list as the user scrolls. There are several libraries available that can help with this, such as react-virtualized and react-window.

Finally, it’s important to consider the cost of re-rendering the entire list when only a few items have changed. One way to avoid this is to use React.memo to prevent unnecessary re-renders of list items.

const MyListItem = React.memo(({ item }) => (
  <li>{item.name}</li>
));

const MyList = ({ items }) => (
  <ul>
    {items.map(item => (
      <MyListItem key={item.id} item={item} />
    ))}
  </ul>
);
By using these techniques, we can improve the performance of rendering large lists in React. Happy coding!

Conditional Rendering in React

Taaha hussain Khan — Fri, 14 Apr 2023 21:25:43 +0000

Conditional Rendering in React

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

Here’s an example of conditional rendering in React:

import React from 'react';

function Example(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}

function UserGreeting(props) {

return

Welcome back!

;

}

function GuestGreeting(props) {

return

Please sign up.

;

}

In this example, the Example component checks the value of isLoggedIn prop and conditionally renders either the UserGreeting or GuestGreeting component.

React Event Handling.

Taaha hussain Khan — Tue, 11 Apr 2023 17:12:11 +0000

React Event Handling: A Comprehensive Guide

React is a popular JavaScript library that allows developers to build complex user interfaces with ease. One of the key features of React is its event handling system. In this article, we will explore how React event handling works and how you can use it to build interactive user interfaces.

What are React Events?

In React, events are actions that occur as a result of user interactions with a web page. These interactions can include clicking on a button, scrolling, or typing into a form field. React provides a number of built-in event handlers that allow you to respond to these actions in your application.

React Event Handling Syntax

In React, event handling is done using a combination of JSX and JavaScript. To create an event handler in React, you start by defining a function that will be called when the event occurs. For example, if you want to handle a button click, you might define a function like this:

Once you have defined your function, you can attach it to an event in your JSX code using the on attribute. For example, to handle a button click, you might write something like this:

In this example, the onClick attribute is used to attach the handleClick function to the click event of the button. When the button is clicked, the handleClick function will be called, and the message "Button clicked" will be logged to the console.

React Event Object

In addition to the event handlers themselves, React also provides an event object that contains information about the event that occurred. For example, if you are handling a button click, the event object will contain information about which button was clicked, where the click occurred, and so on.

To access the event object in your event handler function, you simply include it as a parameter. For example:

In this example, the event parameter contains information about the click event, including the X and Y coordinates of the mouse pointer at the time of the click.

Preventing Default Behavior

Sometimes, you may want to prevent the default behavior of an event from occurring. For example, you may want to prevent a form from submitting when a user clicks a button. To do this in React, you can call the preventDefault method on the event object. For example:

In this example, the preventDefault method is called on the event object to prevent the default behavior of the form submission from occurring. The message "Form submitted" is still logged to the console, but the form is not actually submitted.

Conclusion

React event handling is a powerful tool that allows developers to create interactive and responsive user interfaces. By understanding how to use React event handlers, you can create applications that respond to user input in a variety of ways. Whether you are handling button clicks, form submissions, or other types of events, React provides a flexible and intuitive system for managing user interactions in your application.