Skip to content

Instantly share code, notes, and snippets.

View JenniferFuBook's full-sized avatar

Jennifer Fu JenniferFuBook

24 followers · 0 following
View GitHub Profile
@JenniferFuBook
JenniferFuBook / curry.js
Last active September 5, 2019 23:28
Currying is about decomposing a function taking multiple arguments into numerous functions with single arguments. It is named after Haskell Curry.
const curry = fn => {
if (fn.length === 0) {
return fn;
}
const _curry = (...args) => {
if (fn.length <= args.length) {
return fn.apply(null, args);
}
return _curry.bind(null, ...args);
@JenniferFuBook
JenniferFuBook / mergeDeep.js
Last active September 5, 2019 22:47
This is a code snippet to recursively merge javascript values.
function mergeDeep(...objects) {
// For simplicity, we ignore the cases for Date and Regex
const isObject = obj => obj && typeof obj === 'object';
return objects.reduce((prev, obj) => {
try {
Object.keys(obj).forEach(key => {
const pVal = prev[key];
const oVal = obj[key];
@JenniferFuBook
JenniferFuBook / debounce.js
Last active September 6, 2019 04:33
Debounce limits the rate at which a function can fire. It enforces certain amount waiting time before a function is actually invoked. It is a different control compared to throttle.
function debounce(func, wait) {
let current;
return function (...args) {
clearTimeout(current);
current = setTimeout(() => func.apply(this, args), wait);
}
}
// The message, 'Function is actually invoked', will be printed 1 second after the browser window stops resizing.
window.addEventListener('resize', debounce(()=>console.log('Function is actually invoked'), 1000));
@JenniferFuBook
JenniferFuBook / throttle.js
Last active September 6, 2019 04:34
Throttle limits the rate at which a function can fire. It can only be invoked once during the limit time window. It is a different control compared to debounce.
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
if (!lastRan) {
func.apply(this, args)
lastRan = Date.now();
} else {
clearTimeout(lastFunc)
lastFunc = setTimeout(() => {
@JenniferFuBook
JenniferFuBook / createRef.js
Last active January 27, 2020 01:34
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 'highlight and copy me'
}
this.textInput = React.createRef();
console.log(this.textInput);
this.handleClick = this.handleClick.bind(this);
}
@JenniferFuBook
JenniferFuBook / useRef.js
Created January 27, 2020 01:46
const App = () => {
const [value, setValue] = React.useState('highlight and copy me');
const textInput = React.useRef();
const handleClick = () => {
textInput.current.select();
document.execCommand('copy');
}
return (
@JenniferFuBook
JenniferFuBook / mounted.js
Last active January 27, 2020 04:48
const App = () => {
...
const mounted = React.useRef(true);
React.useEffect(() => {
if (mounted.current) {
some setState commands
}
return () => {
@JenniferFuBook
JenniferFuBook / callbackRefClass.js
Last active April 8, 2023 17:33
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 'highlight and copy me'
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
@JenniferFuBook
JenniferFuBook / callbackRefFunction.js
Last active April 8, 2023 17:34
const App = () => {
const [value, setValue] = React.useState('highlight and copy me');
let textInput;
const handleClick = () => {
textInput.select();
document.execCommand('copy');
}
return (
@JenniferFuBook
JenniferFuBook / forwardRefWrong.js
Last active January 27, 2020 03:40
const MyTextInput = (props) => {
return (
<input {...props}/>
);
};
const App = () => {
const [value, setValue] = React.useState('highlight and copy me');
const textInput = React.useRef('initialRef');