cant89

import { useQuery } from 'react-query';

export const useFetchFirstTodo = () => {
  const { data, error, isLoading } = useQuery("fetchFirstTodo", fetchFirstTodo);
  // -> dispatch and action
  // -> manipulate the response before sending back to component
  // -> call another api
  // -> whatever makes sense for you to put here...
  return { data, error, isLoading }
}

cant89

import { useQuery } from 'react-query';

const fetchFirstTodo = async () => {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const json = await res.json();
    return json;
  } catch (err) {
    throw err;
  }

cant89

const useFetch = (service) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [data, setData] = useState();

  const fetchAPI = useCallback(async () => {
    try {
      const res = await fetch(service);
      const json = await res.json();
      setData(json);

cant89

const Todo = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [data, setData] = useState();

  const fetchTodo = useCallback(async () => {
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      const json = await res.json();
      setData(json);

cant89

{
  "gelaterie": {
    "icon": "🍦",
    "data": [
      {
        "name": "Gelateria Fior Fiore",
        "tel": [
          "051 760522"
        ]
      },

cant89

function areEqual(){
  // your logic here
}
React.memo(MyWelcomeMessage, areEqual)

cant89

shouldComponentUpdate(nextProps, nextState){
  // your logic here
}

cant89

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

const WelcomeMessage = React.memo(({ name }) => {
  console.log("render WelcomeMessage");
  return <label>Hello {name}</label>;
});

const Page = () => {
  const [user, setUser] = useState({});
  console.log("render Page");

cant89

import React, { Fragment } from "react";

class WelcomeMessage extends React.Component {
  render() {
    console.log("render WelcomeMessage");
    return <label>Hello {this.props.user}</label>;
  }
}

class Page extends React.PureComponent {

cant89

import React, { Fragment } from "react";

class WelcomeMessage extends React.Component {
  render() {
    console.log("render WelcomeMessage");
    return <label>Hello {this.props.user}</label>;
  }
}

class Page extends React.Component {