DEV Community: msbala

You Should know 7 Popular React Hooks for State Management, Side Effects, and More

msbala — Sun, 02 Apr 2023 14:48:34 +0000

React Hooks are a popular feature introduced in React 16.8 that allow developers to use state and other React features without writing class components. Here are some of the most popular React Hooks.

1. useState

useState is one of the most commonly used React Hooks. It allows you to add state to a functional component, which can then trigger re-renders when it changes.

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this code snippet, we use the useState hook to declare a state variable called count, which is initially set to 0. We also declare a function called setCount which we use to update the value of count.

We then define a function called increment which simply calls setCount with the new value of count + 1.

Finally, we render the current value of count and a button that, when clicked, calls the increment function.

2. useEffect

useEffect is another popular hook that lets you perform side effects, like fetching data, setting up subscriptions, or updating the DOM, in a functional component.

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

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [count]);

  return (
    <div>
      <p>Timer: {count} seconds</p>
    </div>
  );
}

In this code snippet, we use the useEffect hook to start a timer that increments the value of count by 1 every second using setInterval.

We pass an empty array [] as the second argument to useEffect to tell React that we only want to run this effect once, when the component mounts. We also return a cleanup function that clears the interval when the component unmounts.

We also pass [count] as the second argument to useEffect to tell React to run this effect every time count changes. This will ensure that the timer updates the UI with the latest value of count.

Finally, we render the current value of count in the UI.

3. useContext

useContext lets you consume context created by a parent component, allowing you to share data between components without having to pass props down through multiple levels.

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function App() {
  return (
    <MyContext.Provider value="Hello, World!">
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  const value = useContext(MyContext);

  return <p>{value}</p>;
}

In this code snippet, we define a new context using createContext and store it in a variable called MyContext.

We then define a App component that wraps a child component (MyComponent) in the MyContext.Provider component. We pass a value of "Hello, World!" to the provider, which will be the default value of the context.

Finally, we define a MyComponent component that uses the useContext hook to retrieve the value of MyContext. We then render this value in a p element.

When MyComponent is rendered inside App, it will receive the value of MyContext from the provider and render "Hello, World!" in the UI.

4. useReducer

useReducer is a more powerful alternative to useState, allowing you to manage more complex state changes in your components.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

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

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

In this code snippet, we use the useReducer hook to manage a state variable called count that is initially set to 0. We define a reducer function that takes a state and an action as arguments, and returns a new state based on the action.

We define two actions: increment, which increments the count by 1, and decrement, which decrements the count by 1. If the reducer receives an unknown action, it throws an error.

We then define a Counter component that uses useReducer to initialize the state with initialState and the reducer function. We render the current value of count and two buttons that dispatch the increment and decrement actions, respectively.

When the buttons are clicked, they call the dispatch function with the appropriate action type, which causes the reducer to update the state accordingly. The UI is updated with the new value of count by re-rendering the component.

5. useCallback

useCallback is a hook that lets you memoize a function so that it only changes when its dependencies change. This can help improve performance by reducing unnecessary re-renders.

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

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this code snippet, we use the useCallback hook to create a memoized version of the increment function. This means that the increment function will only be re-created when the count state changes.

We declare a count state variable using useState, and define the increment function using useCallback. The increment function simply calls setCount with the new value of count + 1.

We then render the current value of count and a button that, when clicked, calls the increment function.

By using useCallback, we can avoid unnecessary re-renders of the component, since the increment function will not change unless count changes. This can help improve performance in some cases.

6. useMemo

useMemo is similar to useCallback, but it memoizes a value instead of a function. This can be useful for expensive calculations that don't need to be re-calculated on every render.

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

function Square({ value }) {
  return <button>{value}</button>;
}

function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  const handleClick = useMemo(() => {
    return (i) => {
      const newSquares = [...squares];
      newSquares[i] = 'X';
      setSquares(newSquares);
    };
  }, [squares]);

  return (
    <div>
      <div className="board-row">
        <Square value={squares[0]} onClick={() => handleClick(0)} />
        <Square value={squares[1]} onClick={() => handleClick(1)} />
        <Square value={squares[2]} onClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onClick={() => handleClick(3)} />
        <Square value={squares[4]} onClick={() => handleClick(4)} />
        <Square value={squares[5]} onClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onClick={() => handleClick(6)} />
        <Square value={squares[7]} onClick={() => handleClick(7)} />
        <Square value={squares[8]} onClick={() => handleClick(8)} />
      </div>
    </div>
  );
}

In this code snippet, we use the useMemo hook to memoize the handleClick function. The handleClick function updates the state of the squares array when a square on the game board is clicked.

We declare a squares state variable using useState, and define the handleClick function using useMemo. The handleClick function creates a new copy of the squares array with the clicked square updated to 'X', and then sets the state of squares to the new array.

We then render the game board by mapping over the squares array and rendering a Square component for each item in the array. The Square component receives a value prop and an onClick prop, which is set to the memoized handleClick function with the appropriate index.

By using useMemo, we can memoize the handleClick function so that it doesn't get re-created on every render of the component. This can help improve performance in some cases.

7. useRef

useRef allows you to create a mutable reference that persists across renders. This can be useful for storing mutable values, like a reference to a DOM element.

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

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

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

In this code snippet, we use the useRef hook to create a reference to the text input element. We then use this reference to set focus to the input element when a button is clicked.

We declare an inputRef variable using useRef, and assign it to the ref attribute of the text input element. We then define a handleClick function that calls the focus() method of the inputRef object to set focus to the input element.

We render the text input element and a button that, when clicked, calls the handleClick function.

By using useRef, we can create a reference to a DOM element and access its properties and methods. This can be useful in cases where we need to interact with a specific DOM element, such as setting focus to an input field.

Conclusion

These are just a few of the most commonly used React Hooks. There are many other hooks available in the React ecosystem, and new ones are being created all the time.

How to Use Higher Order Functions for Reusability and Abstraction in React

msbala — Sat, 01 Apr 2023 15:57:48 +0000

Higher order functions are commonly used in React to abstract common patterns in your code, such as handling state or props. Here are a few examples of how to use higher order functions in React.

1 . Higher Order Components (HOCs): HOCs are functions that take a component as an argument and return a new component with additional functionality. For example, you could define an HOC that adds a loading prop to a component while it's fetching data.

function withLoading(Component) {
  return function WithLoading(props) {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
      fetchData().then(() => setIsLoading(false));
    }, []);

    return isLoading ? <p>Loading...</p> : <Component {...props} />;
  }
}

const MyComponentWithLoading = withLoading(MyComponent);

2 . Render Props: Render props are functions that are passed as props to a component and are used to render its content. For example, you could define a render prop that provides a formatted date string.

function DateFormatter({ render }) {
  const date = new Date();
  const formattedDate = date.toLocaleDateString();

  return render(formattedDate);
}

function MyComponent() {
  return (
    <div>
      <DateFormatter render={(date) => <p>Today is {date}</p>} />
    </div>
  );
}

3 . Functional State Updates: Functional state updates are a way of updating state based on its previous value using a function. For example, you could define a function that updates a count state based on its previous value.

function MyComponent() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

By using higher order functions in React, you can write more reusable and composable code, making it easier to maintain and scale your applications.

conclusion

Higher order functions are a powerful tool in React that can help you abstract common patterns in your code, making it more reusable and maintainable.

Higher order functions can be used in React in several ways, including as Higher Order Components (HOCs), Render Props, and Functional State Updates.

HOCs allow you to add additional functionality to a component by wrapping it in a higher-order function. Render Props provide a way to share code between components by passing a function as a prop to the child component. Functional State Updates allow you to update state based on its previous value, which can help prevent race conditions and other bugs.

By using higher order functions in React, you can write more expressive and composable code, which can make it easier to build complex applications with reusable components.

10 Python Libraries That Will Make Your Life Easier

msbala — Thu, 30 Mar 2023 07:00:38 +0000

Introduction

Python is a popular programming language known for its simplicity, readability, and versatility. However, what makes Python truly powerful is its vast ecosystem of libraries. In this blog post, we'll take a look at 10 Python libraries that can help you solve common programming problems and make your life easier.

Requests: If you need to send HTTP/1.1 requests, this library is a must-have. It allows you to send HTTP/1.1 requests extremely easily, and handles common tasks like authentication, cookies, and more.
Pandas: Pandas is a powerful library for data manipulation and analysis. It provides fast, flexible, and expressive data structures designed to work with both structured and unstructured data.
NumPy: NumPy is a library for scientific computing in Python. It provides a multidimensional array object, various derived objects (such as masked arrays and matrices), and an assortment of routines for fast operations on arrays, including mathematical, logical, shape manipulation, sorting, selecting, I/O, discrete Fourier transforms, basic linear algebra, basic statistical operations, random simulation, and much more.
Matplotlib: Matplotlib is a plotting library for Python. It provides an object-oriented API for embedding plots into applications using general-purpose GUI toolkits like Tkinter, wxPython, Qt, or GTK.
SciPy: SciPy is a library for scientific computing in Python. It provides functions for optimization, integration, interpolation, eigenvalue problems, Fourier analysis, signal processing, linear algebra, and much more.
Pygame: Pygame is a library for creating games in Python. It provides a set of tools and functions for creating 2D and 3D games, including graphics, sound, and user input handling.
Beautiful Soup: Beautiful Soup is a library for web scraping in Python. It provides an easy-to-use API for extracting data from HTML and XML files.
Pillow: Pillow is a library for image processing in Python. It provides tools and functions for opening, manipulating, and saving many different image file formats.
Scikit-learn: Scikit-learn is a library for machine learning in Python. It provides simple and efficient tools for data mining and data analysis, including classification, regression, clustering, and dimensionality reduction.
PyQT: PyQT is a set of Python bindings for the QT application framework. It allows you to create desktop applications with a graphical user interface (GUI) using Python.

Conclusion

These 10 Python libraries are just a small sample of what's available in the Python ecosystem. By using these libraries, you can save time and effort in your programming projects, and focus on the more important aspects of your work. Whether you're working on data analysis, web scraping, image processing, machine learning, or game development, Python has the tools you need to succeed.

Different Ways to fetch data from API in Reactjs

msbala — Sun, 26 Mar 2023 18:19:52 +0000

Introduction

In this blog, we will cover the basics of Web API.
We will try to learn different ways to fetch data from API.
Let’s begin without any further delay.

Web APIs

API stands for Application Programming Interface. The most popular Web Api used is a Representational state transfer API or RESTful API. Web APIs are used to fetch data from a database and save data back to the database. Using Web APIs requires the use of HTTP request methods there are different HTTP request methods like GET,POST,PUT,DELETE, etc. Let’s have a brief description of the mentioned HTTP request.

GET: Used to request data from an endpoint

POST: Sends data to an endpoint

DELETE: Remove data from an endpoint.

PUT: Update a record or data value at an endpoint.

Ways of Fetching Data from API

There are different of fetching data:

By using Fetch API

By using Axios library

By using async-await syntax

By using custom hooks

By using React Query

1. Fetch API

We can fetch data by using javascript fetch() method. It will request sever and load the information on the web pages. It will return a promise.

Let’s start with the example. We will create a fetchData() method. It will call fetch() the method with the given URL then converts the result to a JSON object.

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

function App() { 
  const [user, setUser] = useState([]);

  const fetchData = () => {
    return fetch("https://jsonplaceholder.typicode.com/users")
          .then((response) => response.json())
          .then((data) => setUser(data));
  }

  useEffect(() => {
    fetchData();
  },[])

  return (
    <main>
      <h1>User List</h1>
      <ul>
        {user && user.length > 0 && user.map((userObj, index) => (
            <li key={userObj.id}>{userObj.name}</li>
          ))}
      </ul>
    </main>
  );
}

export default App;

2. Axios

Axios is a javascript library that we use to make HTTP requests same as fetch(). There is a difference between these two as in fetch() we have to convert the result to a JSON object but in Axios it already returns the result as a JSON object, so we don’t need to convert it.

Let’s take the example of Axios library. First, we have to install the Axios library then we have to import Axios from Axios.

npm install axios

import axios from "axios";
const fetchData = () => {
    return axios.get("https://jsonplaceholder.typicode.com/users")
          .then((response) => setUser(response.data));
  }

  useEffect(() => {
    fetchData();
  },[])

3. Using async and await

We use Async-Await as it is an asynchronous technique that is operated via an event loop. Async functions will always return a value. It is the preferred way of fetching the data from an API as it enables us to remove our .then() callbacks and return asynchronously resolved data. In the async block, we can use Await function to wait for the promise.

async function fetchData() {
    try {
      const response = await axios.get("https://jsonplaceholder.typicode.com/users")
      setUser(response.data)
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchData();
  },[])

4. Custom Hooks

Let’s have a brief understanding that what are custom hooks. So, we use custom hooks when we have a component logic that can be used by other components in our application. It is basically a React functional component whose name will start with “use” like useFetch. Custom Hooks can use one or more React hooks inside them.

We also have a React library React-Fetch-Hook for fetching data from API. This library has several properties that we can use like data it will give us data fetched from API, the error we use this for handling errors, and isLoading is used for loading.

Firstly we have to install that library for use that by

npm i react-fetch-hook

import useFetch from "react-fetch-hook"

const {data} = useFetch("https://jsonplaceholder.typicode.com/users");
console.log(data);

Now, we will create our custom hook useFetch.

useFetch.js

import { useEffect, useState } from "react";
import axios from "axios";

const useFetch = (method, url, body) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState([]);
  const [apiError, setApiError] = useState('');

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const response = await axios({
          method: method,
          url: url,
          data: body
        });
        const data = await response?.data;

        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setApiError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url, method, body]);

  return { isLoading, apiData, apiError };
};

export default useFetch;

App.js

import useFetch from "../src/useFetch";

function App() { 
  const { isLoading, apiError, apiData } = useFetch(
    "GET",
    "https://jsonplaceholder.typicode.com/users",
    {}
  );

5. React Query

For optimizing the request operations in our application we use React Query library which helps us to handle complex application caching. It is far simpler to write in React Query than React-Redux. It performs pre-fetching of data so that the application can update stale data in the background.

So for using React Query first we have to install React Query library by.

npm i react-query

So to configure react-query in our React.js application, we need to wrap our components with the QueryClientProvider component. We will do configuration in our root directory file.

index.js


import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  rootElement
);

Let’s see how we fetch data by useQuery
First, we have to import useQuery from react-query. The useQuery hook returns some states that we can use in our application like isLoading, data, error, Is Error,

import React, { useState } from "react";
import { useQuery } from "react-query";
import axios from "axios";

function App() {
  async function fetchUser() {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    return data;
  }

  const { data, error, isError, isLoading } = useQuery("getUser", fetchUser);

  return (
    <main>
      <h1>User List</h1>
      <ul>
        {data &&
          data.length > 0 &&
          data.map((userObj, index) => (
            <li key={userObj.id}>{userObj.name}</li>
          ))}
      </ul>
    </main>
  );
}

export default App;

We will create a functional component and import useQuery in that. Then we will create an async function fetchUser() that will return an array of users.

For updating data, we use useMutation hook
So, we use a mutation hook for doing operations like Create, Update, Delete in our components. We will pass the payload as parameters in our mutate function after our async call is done, we will be passed to onSuccess where we can invalidate query that we used for fetching data so that we can get updated data after update into the database.

First, we will see how to use useMutation,

import React, { useState } from "react";
import { useQuery, useMutation } from "react-query";
import axios from "axios";

function App() {
  async function addUser(payload) {
    return await axios.post(
      "https://jsonplaceholder.typicode.com/users",payload
    );
  }

  const {mutate : createNewUser} = useMutation(addUser, {
    onSuccess: () => {
      console.log('success')
    },
  });

  return (
    <main>
      <h1>User List</h1>
      <button onClick={() => {
          createNewUser({
            id: Date.now(),
            userName: 'New User',
          });
        }}>Add User</button>
    </main>
  );
}

export default App;

So now we will invalidate our fetch query in onSuccess. First, we have to declare a new query client to have access to the cache.

import React, { useState } from "react";
import { useQuery, useMutation ,useQueryClient} from "react-query";
import axios from "axios";

function App() {
  const queryClient = useQueryClient();

  async function addUser(payload) {
    return await axios.post(
      "https://jsonplaceholder.typicode.com/users",payload
    );
  }


  const {mutate : createNewUser} = useMutation(addUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('getUser');
    },
  });

So, in invalidateQueries, we are passing fetch query name (‘getUser’) that will fetch the data.

Conclusion

In this blog, we have covered different API fetch practices.

In our upcoming blog, we will try to learn about React Hooks.

For more interesting blogs visit- StatusNeo Blogs

Thanks for reading, Ba-Bye for now.

#MarkUP Language

msbala — Wed, 22 Mar 2023 11:41:52 +0000

Introduction

Markdown is a lightweight markup language used for formatting and styling plain text. It was designed to be easy to read and write, with a simple syntax that can be converted into HTML or other formats.

In Markdown, you can add formatting elements to your text by using special characters and simple syntax. Here are some common formatting options:

Headings: You can create headings by adding a number of hash symbols (#) at the beginning of a line. The number of hash symbols indicates the level of the heading, with one hash symbol for the largest heading and six for the smallest.
Emphasis: You can emphasize text by enclosing it in asterisks () or underscores (_). For example, *italic or italic will appear as italicized text, while bold or bold will appear as bold text.
Lists: Markdown supports both ordered and unordered lists. For unordered lists, you can use either asterisks (*), plus signs (+), or hyphens (-) at the beginning of each line. For ordered lists, you can use numbers followed by periods. Indentation can be used to create nested lists.
Links: You can create links by enclosing the link text in square brackets ([]) and the URL or path in parentheses (()). For example, Google will create a clickable link to the OpenAI website.
Images: Similar to links, you can include images in Markdown by using an exclamation mark (!), followed by square brackets containing the image alt text, and parentheses containing the image URL or path. For example, will display an image with the alt text "Alt Text."

conclusion

These are just a few examples of the formatting options available in Markdown. It's widely used for creating documentation, writing blog posts, and formatting content on websites or in plain text files. Markdown files can be easily converted to HTML, PDF, or other formats using various tools and libraries.