Skip to content

Instantly share code, notes, and snippets.

View YuCJ's full-sized avatar

yucj YuCJ

22 followers · 12 following
View GitHub Profile
@YuCJ
YuCJ / TanStack-Query-State-Indicators.md
Created December 2, 2025 08:07
isFetching, isLoading, and isPending

TanStack Query State Indicators: isFetching, isLoading, and isPending

Overview

Understanding the differences between isFetching, isLoading, and isPending is crucial for implementing effective loading states in TanStack Query (React Query) v5.

Definitions

1. isPending

  • true when the query has no cached data yet (awaiting first successful fetch)
@YuCJ
YuCJ / compose-react-refs.jsx
Last active August 30, 2020 15:41
In React, we use `ref` to touch the DOM element directly. When a component takes refs passed by its parent, and it needs to touch the DOM element by itself also, we have to compose the refs into one so we can pass it to the child..
function updateElementInRef(element, ref) {
if (typeof ref === 'function') {
/*
The ref is a callback ref.
https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
*/
ref(element)
} else if (ref) {
/*
The ref is an object expected to be mutated with property `current`.
@YuCJ
YuCJ / optimizing-resource.md
Last active December 17, 2018 10:08
@YuCJ
YuCJ / handle-promise.js
Created August 7, 2018 07:56
function getList() {
const list = [1, 2, 0, 3, 4]
return Promise.resolve(list)
}
function task() {
return new Promise((resolve, reject) => {
getList()
.then((list) => {
let hasFailure = false
@YuCJ
YuCJ / pureSplice.js
Last active April 2, 2022 02:36
A pure version of Array.prototype.splice(). It will return a new array rather than mutate the array.
/**
* A pure version of Array.prototype.splice
* It will return a new array rather than mutate the array
* See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
* @param {Array} array The target array
* @param {number} start Index at which to start changing the array
* @param {number} deleteCount An integer indicating the number of old array elements to remove
* @param {any} items The elements to add to the array, beginning at the start index
* @returns {Array}
*/
@YuCJ
YuCJ / collapse.js
Created February 9, 2018 11:21
import $ from 'jquery'
import Util from './util'
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@YuCJ
YuCJ / fullpage-slide-height-by-device.md
Created January 31, 2018 06:33
裝置解析度 實際可用高度
iPhone 6,7,8 375 x 667 559
iPhone 6,7,8 Plus 414 x 736 628
iPad 768 x 1024 928
iPad Pro 1024 x 1366 1270
@YuCJ
YuCJ / page-transition.md
Created January 31, 2018 06:32
Set 1 Set 2 Set 3
1 Enter from previous page animeEnter animeEnter animeEnterFromPrev
2 Enter from next page reversed animeExit animeEnter animeEnterFromNext
3 Exit to next page animeExit animeExit animeExitToNext
4 Exit to previous page reversed animeEnter animeExit animeExitToPrev
@YuCJ
YuCJ / fullpage-material-by-device.md
Created January 31, 2018 06:30
Device Width Height fg object-fit bg object-fit
Desktop 1440 810 cover cover
Tablet 1024 1024 cover cover
Mobile 768 1024 contain/cover cover
@YuCJ
YuCJ / slides-children-by-function.jsx
Last active January 31, 2018 08:37
import map from 'lodash.map'
import React from 'react'
import Viewport from './fullpage-slides-viewport'
const backgroundData = [{/* slide 0 bg */}, {/* slide 2 bg */}, {/* slide 4 bg */}]
const textData = [{/* slide 0 text */}, {/* slide 3 text */}, {/* slide 4 text */}]
const _ = {
map,
}