Improve React Performance using Lazy Loading💤 and Suspense | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces

Sat Feb 19 2022 13:02:25 GMT+0000 (Coordinated Universal Time)

Saved by @Rubel #react #testing #performance

Lazy Loading usage

https://blog.bitsrc.io/improve-react-performance-using-lazy-loading-and-suspense-933903171954

Save snippets that work from anywhere online with our extensions

Comments

React

@Rubel

stateful class component eventListener stateless functional components usehooks-ts - React hooks library, written in Typescript Hooks Cheatsheet 8 Awesome React Hooks How To Use Background Images in React (With Example Code) - Upmostly Code Splitting a Redux Application | Pluralsight Building an accessible React Modal component - Programming with Mosh Improve React Performance using Lazy Loading💤 and Suspense | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces Animate When Element is In-View with Framer Motion | by Chad Murobayashi | JavaScript in Plain English Handling Scroll Based Animation in React (2-ways) - Ryosuke connect react to redux connect react to redux In-Depth React Tutorials for 2022 | egghead.io Getting Started | Axios Docs

#rust #performance

The Rust Performance Book

https://nnethercote.github.io/perf-book/title-page.html

#enqueue #scripts #performance

BF WPO Dequeuer – Plugin WordPress | WordPress.org España

https://es.wordpress.org/plugins/bf-wpo-dequeuer/

#react #testing #performance

Improve React Performance using Lazy Loading💤 and Suspense | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces

https://blog.bitsrc.io/improve-react-performance-using-lazy-loading-and-suspense-933903171954

#memory #performance #profile #garbage-collection

Memory Dev Tools

# A memory leak can occur in your application when an element is no longer attached to the Document Object Model (DOM) tree, but is still referenced by some JavaScript running on the page. These elements are called detached elements.
[https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks]
 
 
 a reference to an object will prevent the object referenced from being garbage collected.
 [https://developer.chrome.com/docs/devtools/memory-problems/memory-101/]
 
 
 # window leaks
 variables set on the window do not get collected
 - windwo.myvar = 'whatever'
 [https://medium.com/coding-blocks/catching-memory-leaks-with-chrome-devtools-57b03acb6bb9]

#performance #python

Use timeit to benchmark code

import timeit


def adder(x, y):
	return x + y


t = timeit.Timer(setup='from __main__ import adder', stmt='adder(10, 20)')
t.timeit()

#performance #python

Use cProfile/Profile to profile the performance of code

import cProfile

# Use `profile` if `cProfile` isn't available on your OS
# import profile


def adder(x, y):
	return x + y


cProfile.run('adder(10, 20)')

#commandline #javascript #tutorial #react

Creating a CLI to Automate File Creation

https://dev.to/m0nica/automating-file-creation-with-javascript-8j5

#react

Recharts

https://recharts.org/en-US/

#react

React Simple Maps — Trigger geography highlights on hover - CodeSandbox

https://codesandbox.io/s/rmmzrkm75o?file

#react #api #fetch #async #error

Get movies from the movie database

  const getMovies = async (url) => {
    setError(null);
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const data = await response.json();
      
      if (data.results.length === 0) {
        throw new Error("Sorry, no movies were found.");
      }
      
      const transformedMovies = data.results.map((movie) => {
        return {
          id: movie.id,
          title: movie.title,
          description: movie.overview,
          rating: movie.vote_average,
          genres: movie.genre_ids,
          poster_path: movie.poster_path,
          backdrop_path: movie.backdrop_path,
          year: movie.release_date
        }
      })
      setTotalPages(data.total_pages);
      setMovies(transformedMovies);
      chooseMovie(transformedMovies);
    } catch (errorThrown) {
      setError(errorThrown.message);
    }
  }

#react #api #ruby #rubyonrails

GET request in ruby on rails

  def search
    baseurl = "https://api.themoviedb.org/3/discover/movie?api_key=#{ENV['REACT_APP_TMDB_API_KEY']}&language=en-						US&sort_by=popularity.desc&with_watch_monetization_types=flatrate&include_adult=false&include_video		=false&page=${moviePageIndex}";
    urladdon = params[:urlAddon]

    require 'uri'
    require 'net/http'

    uri = URI("#{baseurl}#{urladdon}")
    res = Net::HTTP.get_response(uri)

    if res.is_a?(Net::HTTPSuccess)
      render json: res.body
    else
      render json: res.body, status: :bad_request
    end
  end

#react #portal #reactportal

React Portal

const rootDomElement: any = document.getElementById('root');
const newBlock = (
      <div>
        <p>The New Content</>
      </div>
  );
ReactDOM.createPortal(newBlock, rootDomElement);


// you can return it too
// return ReactDOM.createPortal(PDFPopup, RootDomElement);

#react #react.js #draggable

Tired of Boring Static Dashboards? Let’s Build a Fully Customizable Dashboard in React | by Dilum | Jun, 2021 | JavaScript in Plain English

https://javascript.plainenglish.io/tired-of-boring-static-dashboards-lets-build-a-fully-customizable-dashboard-in-react-88cb5369cfe1

#react

saves to local storage

function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem('rgl-8')) || {};
    } catch (e) {}
  }
  return ls[key];
}
function saveToLS(key, value) {
  if (global.localStorage) {
    global.localStorage.setItem(
      'rgl-8',
      JSON.stringify({
        [key]: value,
      }),
    );
  }
}

#array #react.js #javascript #react #filter #map

Filter, then map an array : React

import React from 'react';

const names = ['James', 'John', 'Paul', 'Ringo', 'George'];

function App() {
  return (
    <div>
      {names.filter(name => name.includes('J')).map(filteredName => (
        <li>
          {filteredName}
        </li>
      ))}
    </div>
  );
}

export default App;

Improve React Performance using Lazy Loading💤 and Suspense | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces

Save snippets that work from anywhere online with our extensions

Comments

More like this

React

Browse more snippets >>

Improve React Performance using Lazy Loading💤 and Suspense | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces

Save snippets that work from anywhere online with our extensions

Comments

More like this

React

Browse more snippets >>

Embed code snippet