Ever Dev ever-dev

Use of callback like functions

function someFunction1( callbackFn ) => someFunction1(() => { doSomething(); })

function promiseFunction() {
  return new Promise((resolve) => {
     someFunction1(resolve);
  });
}

We often face (or sometimes we need to implement) initialValue which sets the value only for the first time when it's rendered. (Fortunately, I had a chance to implement initialValue not so long ago).
A good example is formik.

const [types, setTypes] = useEffect(null);
const getTypes = useCallback(async () => {
  const res = await getTypesAPI();
  setTypes(res);
}, []);
return

I really liked @tjvantoll article Handling Failed HTTP Responses With fetch(). The one thing I found annoying with it, though, is that response.statusText always returns the generic error message associated with the error code. Most APIs, however, will generally return some kind of useful, more human friendly message in the body.

Here's a modification that will capture this message. The key is that rather than throwing an error, you just throw the response and then process it in the catch block to extract the message in the body:

fetch("/api/foo")
  .then( response => {
    if (!response.ok) { throw response }
    return response.json()  //we only get here if there is no error
 })

	import { useState, useEffect } from "react";

	export const useDebounce = (value: any, delay: number) => {
	// State and setters for debounced value
	const [debouncedValue, setDebouncedValue] = useState(value);

	useEffect(
	() => {
	// Update debounced value after delay
	const handler = setTimeout(() => {

	import { useState, useEffect } from "react";

	export const useTimer = (delay: number) => {
	const [clock, setClock] = useState(false);

	useEffect(
	() => {
	// toggle clock
	const handler = setInterval(() => {
	setClock((v) => !v);

	type THttpMethod = "GET" \| "POST" \| "PUT" \| "DELETE";

	export const httpClient = (
	url: string,
	method: THttpMethod = "GET",
	data: any = {}
	) => {
	const params: { [i: string]: any } = {
	method,
	headers: {

	function promiseFunction(v) {
	return new Promise((resolve) => {
	setTimeout(() => resolve(v), 1000);
	});
	}

	// f1() will print `all done` first and then print 1,2,3,4 at once after a second.
	function f1() {
	[1, 2, 3, 4]. forEach(async(i) => {
	const v = await promiseFunction(i);

	/** @jsx jsx */
	import { jsx, css } from '@emotion/core'
	import { FunctionComponent, useState } from 'react'
	import { Icon } from '~/components'
	import PerfectScrollbar from 'react-perfect-scrollbar'
	import 'react-perfect-scrollbar/dist/css/styles.css'

	interface Tab {
	title: string
	Content: FunctionComponent<{}>

	<template>
	<section :class="content.type" fluid class="content-container">
	<!-- Content Header -->
	<v-row>
	<v-col v-if="content.showTitle" cols="12">
	<p class="heading text-left text-xs-center d-flex align-center mb-5">
	<v-icon
	v-if="content.type === 'changelog'"
	:class="{ open: collapse }"
	@click="toggleCollapse()"

	const arr = [...];

	arr.reduce((p, cur) => {
	return p.then(()=> {
	return doSomething(cur);
	});
	}, Promise.resolve());