- Jan 2023
- Dec 2022
-
stackoverflow.com stackoverflow.com
-
stackoverflow.com stackoverflow.com
-
I had been wrapping my components with an improper tag that is, NextJS is not comfortable having a p tag wrapping your divs, sections etc so it will yell "Hydration failed because the initial UI does not match what was rendered on the server". So I solved this problem by examining how my elements were wrapping each other.
-
-
blog.nparashuram.com blog.nparashuram.com
-
TL;DR; A custom renderer for ReactJS that uses Web Workers to run the expensive Virtual DOM diffing calculations
-
-
blog.nparashuram.com blog.nparashuram.com
-
Tl;Dr; ReactJS is faster when Virtual DOM reconciliations are done on a Web Worker thread.
-
-
dexie.org dexie.org
-
```js import React from "react"; import Dexie from "dexie"; import { useLiveQuery } from "dexie-react-hooks"; import { db } from "./db";
// // React component // export function OldFriendsList() { const friends = useLiveQuery( () => db.friends .where('age') .above(75) .toArray() );
if (!friends) return null; // Still loading.
return
-
{ friends.map(friend =>
- {friend.name}, {friend.age} ) }
-
-
Tags
Annotators
URL
-
-
www.developerway.com www.developerway.com
-
Context selectors, however, could be faked with the use of higher-order components and React.memo.
-
There is no way to prevent a component that uses a portion of Context value from re-rendering, even if the used piece of data hasn’t changed, even with useMemo hook.
-
✅ Preventing Context re-renders: Context selectors
-
If Context manages a few independent data chunks, they can be split into smaller providers under the same provider. That way, only consumers of changed chunk will re-render.
-
✅ Preventing Context re-renders: splitting data into chunks
-
That way, components that use API only won’t re-render when the data changes.
-
If in Context there is a combination of data and API (getters and setters) they can be split into different Providers under the same component. That way, components that use API only won’t re-render when the data changes.
-
✅ Preventing Context re-renders: splitting data and API
-
If Context Provider is placed not at the very root of the app, and there is a possibility it can re-render itself because of changes in its ancestors, its value should be memoized.
-
✅ Preventing Context re-renders: memoizing Provider value
-
Preventing re-renders caused by Context
-
⛔️ Antipattern: random value as key in lists
-
if the list is static, i.e. elements are not added/removed/inserted/re-ordered
-
It is okay to use array’s index as key, if the list is static, i.e. elements are not added/removed/inserted/re-ordered.
-
Value in key should be a string, that is consistent between re-renders for every element in the list.
-
Important: just providing key attribute will not improve lists' performance. To prevent re-renders of list elements you need to wrap them in React.memo and follow all of its best practices.
-
Improving re-render performance of lists
-
the typical use case for useMemo would be to memoize React elements. Usually parts of an existing render tree or results of generated render tree, like a map function that returns new elements
-
useMemo has its cost (consumes a bit of memory and makes initial render slightly slower)
-
✅ useMemo for expensive calculations
-
If a component uses non-primitive value as a dependency in hooks like useEffect, useMemo, useCallback, it should be memoized.
-
If a child component is wrapped in React.memo, all props that are not primitive values have to be memoized
-
✅ Necessary useMemo/useCallback
<br/>
-
⛔️ Antipattern: unnecessary useMemo/useCallback on props
-
If a parent component re-renders, it will trigger re-render of a child component regardless of its props.
-
Memoizing props by themselves will not prevent re-renders of a child component.
-
React.memo has to be applied to the elements passed as children/props.
-
✅ React.memo: components as props or children
-
All props that are not primitive values have to be memoized for React.memo to work
-
✅ React.memo: component with props
-
Wrapping a component in React.memo will stop the downstream chain of re-renders that is triggered somewhere up the render tree, unless this component’s props have changed.
-
Preventing re-renders with React.memo
-
Props are not affected by the state change, so heavy components won’t re-render
-
encapsulates the state inside a smaller component, and heavy components are passed to it as props
-
✅ Preventing re-renders with composition: components as props
-
✅ Preventing re-renders with composition: children as props
-
✅ Preventing re-renders with composition: moving state down
-
There is also a big myth: that re-renders happen when the component’s props change. By itself, it’s not true (see the explanation below).
-
hooks changes
-
context changes
-
parent (or children) re-renders
-
state changes
-
There are four reasons why a component would re-render itself:
-
- Nov 2022
-
www.aquib.dev www.aquib.dev
Tags
Annotators
URL
-
-
vite-pwa-org.netlify.app vite-pwa-org.netlify.app
-
www.causal.app www.causal.app
-
-
www.developerway.com www.developerway.com
-
www.developerway.com www.developerway.com
-
www.developerway.com www.developerway.com
-
www.developerway.com www.developerway.com
-
maxrozen.com maxrozen.com
Tags
Annotators
URL
-
-
www.nielskrijger.com www.nielskrijger.com
-
github.com github.com
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
-
-
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
kabartolo.github.io kabartolo.github.io
-
-
-
reactjs.org reactjs.org
Tags
Annotators
URL
-
-
unprogrammer.com unprogrammer.com
-
bvaughn.github.io bvaughn.github.io
-
egghead.io egghead.io
-
remix.run remix.run
Tags
Annotators
URL
-
-
www.icoderzsolutions.com www.icoderzsolutions.com
-
ReactJS vs React Native: A Comparison Guide for 2023
React Native vs ReactJS have become two of the most popular web development technologies in the world. The main difference between ReactJS and React native is that ReactJS is JavaScript while ReactJS native is mobile app development framework. Let’s take a closer look at the advantages and disadvantages of ReactJS vs React native. https://bit.ly/3fo6Lwl
-
-
Tags
Annotators
URL
-
- Oct 2022
-
www.developerhandbook.com www.developerhandbook.com
-
dmitripavlutin.com dmitripavlutin.com
Tags
Annotators
URL
-
-
blog.logrocket.com blog.logrocket.com
-
reactrouter.com reactrouter.com
-
twitter.com twitter.com
-
www.infoworld.com www.infoworld.com
-
patterns.dev patterns.dev
Tags
Annotators
URL
-
-
www.infoxicator.com www.infoxicator.com
-
-
codesandbox.io codesandbox.io
Tags
Annotators
URL
-
- Sep 2022
-
sebhastian.com sebhastian.com
Tags
Annotators
URL
-
-
sebhastian.com sebhastian.com
Tags
Annotators
URL
-
-
sebhastian.com sebhastian.com
-
Sometimes, Create React App will produce an error when you try to create a new application using npx or npm init.
Create React App no longer support global installation This is how to fix the issue
-
-
www.icoderzsolutions.com www.icoderzsolutions.com
-
Hire Dedicated React JS Developers in India
Hire dedicated ReactJs developers to develop the most elegant websites for your business. Hire dedicated ReactJs developers from India and the USA to build fast-loading, user-friendly ReactJS websites for your business. https://bit.ly/3fjf0JI
-
-
tkdodo.eu tkdodo.eu
-
remix.run remix.run
Tags
Annotators
URL
-
-
reactrouter.com reactrouter.com
Tags
Annotators
URL
-
-
reactrouter.com reactrouter.com
Tags
Annotators
URL
-
-
codesandbox.io codesandbox.io
-
```js import { useState } from 'react';
/* * @return {Function} getterSetter / export function useStateFunction(initialValue) { const [state, setState] = useState(initialValue);
return function(...args) { if (args.length === 0) { return state; } return setState(...args); };
} ```
-
-
stackoverflow.com stackoverflow.com
-
```js function App() { const buttonRef = useRef(null); const hookValue = useMyHook(buttonRef.current); const [forceUpdate, setForceUpdate] = useState(false);
return ( <div> <button onClick={() => setForceUpdate(prevState => !prevState)}> Update Component </button> <button ref={buttonRef}>Update Hook</button> {"This is hook returned value: " + hookValue} </div> ); } ```
```js import { useEffect, useState } from "react";
function useMyHook(element) { const [myHookState, setMyHookState] = useState(0);
console.log("Inside useMyhook..."); console.log("This is the element received: " + element);
useEffect(() => { console.log("Inside useMyhook useEffect...");
function onClick() { setMyHookState(prevState => prevState + 1); } if (element !== null) { element.addEventListener("click", onClick); } return () => { console.log("Inside useMyhook useEffect return..."); if (element !== null) { element.removeEventListener("click", onClick); } };
});
return myHookState; }
export default useMyHook; ```
-
-
stackoverflow.com stackoverflow.com
-
paco.me paco.me
-
-
www.youtube.com www.youtube.com
-
-
blog.logrocket.com blog.logrocket.com
- Aug 2022
-
stackoverflow.com stackoverflow.com
-
stackoverflow.com stackoverflow.com
-
js useEffect(() => { console.log(outcomes) }, [JSON.stringify(outcomes)]) // 🧐🤯
-
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
-
blog.bitsrc.io blog.bitsrc.io
-
blog.openreplay.com blog.openreplay.com
-
www.youtube.com www.youtube.com
-
-
www.netlify.com www.netlify.com
-
kentcdodds.com kentcdodds.com
-
gaplo917.github.io gaplo917.github.io
-
github.com github.com
-
The current web developmennt ONLY offload the tasks to web worker when the application encounter performance issues but NOT by the tasks' nature.
-
-
Tags
Annotators
URL
-
-
daily-dev-tips.com daily-dev-tips.com
-
And in our case, we want it to keep track of our storage object. So let's also create a usePeristentContext hook.
```js import { useMutation, useQuery, useQueryClient } from 'react-query';
export default function usePersistentContext(key) { const queryClient = useQueryClient();
const { data } = useQuery(key, () => localStorage.getItem(key));
const { mutateAsync: setValue } = useMutation( (value) => localStorage.setItem(key, value), { onMutate: (mutatedData) => { const current = data; queryClient.setQueryData(key, mutatedData); return current; }, onError: (_, __, rollback) => { queryClient.setQueryData(key, rollback); }, } );
return [data, setValue]; } ```
js function SetContext() { const [value, setValue] = usePersistentContext('item_context'); return ( <button onClick={() => setValue(value === 'on' ? 'off' : 'on')}> Click me {value} </button> ); }
-
-
-
No extra re-renders
-
-
attardi.org attardi.org
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
-
-
www.joshwcomeau.com www.joshwcomeau.com
Tags
Annotators
URL
-
-
beta.reactjs.org beta.reactjs.org
-
-
Tags
Annotators
URL
-
-
tech.groww.in tech.groww.in
-
levelup.gitconnected.com levelup.gitconnected.com
-
turn regular custom hook into a singleton custom hook
-
-
stackblitz.com stackblitz.com
Tags
Annotators
URL
-
-
-
The clientHeight property returns the inner height of an element in pixels. The property includes padding but excludes borders, margins and horizontal scrollbars.Alternatively, you can use the offsetHeight property, which returns the height of the element in pixels, including vertical padding and borders.
```js useEffect(() => { setDivHeight(ref.current.offsetHeight); console.log('height: ', ref.current.offsetHeight);
console.log('width: ', ref.current.offsetWidth); }, []); ```
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
-
-
felixgerschau.com felixgerschau.com
Tags
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
```js export function Tweet({ tweetID, }) { const tweetRef = useRef(null); const [isLoading, setIsLoading] = useState(true);
useEffect(() => { const tweetEl = tweetRef?.current if (window.twttr && tweetEl) (async() => { await window.twttr.ready(); await window.twttr.widgets.createTweet( tweetID, tweetEl, { align: 'center', conversation: 'none', dnt: true, } ); setIsLoading(false); console.log('Tweet loaded') })(); return () => { tweetEl?.remove(); } }, [tweetID, tweetRef]);
return ( <div ref={tweetRef} className="w-full bg-gray-100 h-fit animate-fadeIn" id={tweetID}> {isLoading &&
🐦
} </div> ); }; ```
-
-
rahuulmiishra.medium.com rahuulmiishra.medium.com
-
medium.com medium.com
- Jul 2022
-
isamatov.com isamatov.com
Tags
Annotators
URL
-
-
kentcdodds.com kentcdodds.com
Tags
Annotators
URL
-
-
dexie.org dexie.org