Manuel Mauky manuel-mauky

manuel-mauky / LoadDataClass.tsx

Last active June 15, 2020 18:19

React-Hooks-Article: Load data in class component

	import React from "react"

	export class LoadDataClass extends React.Component {
	componentDidMount(): void {
	fetch("/some-data.json")
	.then((response) => response.json())
	.then((data) => {
	this.setState({ data })
	})
	}

manuel-mauky / LoadDataFunction.tsx

Created June 15, 2020 18:11

React-Hooks-Article: Load data in function component with useState and useEffect

	import React, { useEffect, useState } from "react"

	export const LoadDataFunction = () => {
	const [data, setData] = useState()

	useEffect(() => {
	fetch("/some-data.json")
	.then((response) => response.json())
	.then((data) => {
	setData(data)

manuel-mauky / LoadDataFunction.tsx

Created June 15, 2020 18:16

React-Hooks-Article: Load data Function component with cleanup

	useEffect(() => {
	const controller = new AbortController()

	fetch("/some-data.json", { signal: controller.signal })
	.then((response) => response.json())
	.then((data) => {
	setData(data)
	})

	return () => {

manuel-mauky / UseMediaExample.tsx

Created June 15, 2020 18:18

React-Hooks-Article: useMedia hook

	import React, { useEffect, useState } from "react"

	const useMedia = (query: string): boolean => {
	const [matches, setMatches] = useState(false)

	useEffect(() => {
	const queryObject = window.matchMedia(query)
	setMatches(queryObject.matches)

	const listener = (e: MediaQueryListEvent) => {