Skip to content

Instantly share code, notes, and snippets.

View simicd's full-sized avatar

Dejan Simic simicd

15 followers · 0 following
View GitHub Profile
@simicd
simicd / blog_useFetch_start.tsx
Created August 16, 2020 18:18
// DogImage.tsx
import React, { FC, useState, useEffect } from "react";
export const DogImage: FC = () => {
type DogImageType = { message: string; status: string };
const [data, setData] = useState<DogImageType>();
useEffect(() => {
// Define asynchronous function - since useEffect hook can't handle async directly,
@simicd
simicd / blog_useFetch_create_hook.ts
Created August 16, 2020 18:20
// useFetch.ts
import { useState, useEffect } from "react";
interface RequestProps {
url: RequestInfo;
init?: RequestInit;
}
type DogImageType = { message: string; status: string };
@simicd
simicd / blog_useFetch_async_useEffect.ts
Created August 16, 2020 18:22
// useFetch.ts
// ...
export const useFetch = ({ url, init }: RequestProps) => {
// Response state
const [data, setData] = useState<DogImageType>();
useEffect(() => {
// Define asynchronous function
@simicd
simicd / blog_useFetch_async_useEffect_DogImage.tsx
Created August 16, 2020 18:23
//DogImage.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";
export const DogImage: FC = () => {
const data = useFetch({ url: "https://dog.ceo/api/breed/beagle/images/random"})
return <>{data ? <img src={data.message} alt="dog"></img> : <div>Loading</div>}</>;
};
@simicd
simicd / blog_useFetch_dependency_list_obj.ts
Last active August 17, 2020 19:26
// useFetch.ts
// ...
export const useFetch = ({ url, init }: RequestProps) => {
// Response state
const [data, setData] = useState<DogImageType>();
useEffect(() => {
// Define asynchronous function
@simicd
simicd / blog_useFetch_dependency_list_obj_DogImage.tsx
Last active August 16, 2020 18:27
// DogImage.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";
export const DogImage: FC = () => {
const data = useFetch({ url: "https://dog.ceo/api/breed/beagle/images/random", init: {}})
return <>{data ? <img src={data.message} alt="dog"></img> : <div>Loading</div>}</>;
};
@simicd
simicd / blog_useFetch_dependency_stringify.ts
Last active August 16, 2020 18:36
// useFetch.ts
// ..
export const useFetch = ({ url, init }: RequestProps) => {
// Response state
// ..
useEffect(() => {
// ...
@simicd
simicd / blog_useFetch_dependency_stringify_vars.ts
Created August 16, 2020 18:38
// useFetch.ts
import { useState, useEffect } from "react";
// ..
export const useFetch = ({ url, init }: RequestProps) => {
// ...
// Turn objects into strings for useCallback & useEffect dependencies
@simicd
simicd / blog_useFetch_callback_DogImage.tsx
Created August 16, 2020 18:40
// DogImage.tsx
import React, { FC } from "react";
import { useFetch, DogImageType } from "./useFetch";
export const DogImage: FC = () => {
const data = useFetch({
url: "https://dog.ceo/api/breed/beagle/images/random",
processData: (data) => data as DogImageType,
});
@simicd
simicd / blog_useFetch_callback.ts
Last active August 16, 2020 18:52
// useFetch.ts
import { useState, useEffect } from "react";
interface RequestProps {
url: RequestInfo;
init?: RequestInit;
processData?: (data: any) => DogImageType
}
export type DogImageType = { message: string; status: string };