dstroot

Idiomatic Data Fetching using React Hooks

This post has been written in collaboration with @klervicn

Virtually all web apps and websites need to pull data from a server, usually through a JSON-returning API. When it comes to integrating data fetching in React component, the "impedence mismatch" between the React components, which are declarative and synchronous, and the HTTP requests, which are imperative and asynchronous, is often problematic.

Many apps use third-party libraries such as Redux or Apollo Client to abstract it away. This requires extra dependencies, and couple your app with a specific library to perform data fetching. In most cases, what we want is a direct way to integrate plain HTTP requests (e.g. using native fetch) for usage in React components.

Here we will discuss how we can use React Hooks to do this in an elegant, scalable manner.

dstroot

{
  "basics": {
    "name": "Daniel J. Stroot",
    "label": "Technology Leader",
    "summary": "I’m an experienced technology leader who drives IT transformation.  I have a strong enterprise architecture, cloud architecture and open source technology skills.  I also love building high-performing agile teams. Specialties: React, Redux, Javascript - still a \"full stack developer\" in my spare time.",
    "website": "https://danstroot.com",
    "email": "dan.stroot@gmail.com",
    "location": {
      "city": "Los Angeles",
      "state": "california",

dstroot

#!/bin/bash
echo "*****************************************"
echo " Add the 10gen repository - after you press"
echo " enter add the following lines and then"
echo " cntl-X to save:"
echo " [10gen]"
echo " name=10gen Repository"
echo " baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64"
echo " gpgcheck=0"
echo "*****************************************"

dstroot

package main

import (
	"container/list"
	"fmt"
)

type CacheItem struct {
	key             string        // Key of item
	value           interface{}   // Value of item

dstroot

Keybase proof

I hereby claim:

  * I am dstroot on github.   * I am dstroot (https://keybase.io/dstroot) on keybase.   * I have a public key ASCCKrF70wPevMuYx-3aMbQ4Wv9Ruajf1Rsch62byYChVwo

To claim this, I am signing this object:

dstroot

#!/bin/sh
#
# redis - this script starts and stops the redis-server daemon
#
# chkconfig:   - 85 15 
# description:  Redis is a persistent key-value database
# processname: redis-server
# config:      /etc/redis/redis.conf
# config:      /etc/sysconfig/redis
# pidfile:     /var/run/redis.pid

dstroot

FROM golang:1.7-alpine
RUN apk add --no-cache \
    git

ENV GOPATH $HOME/gocode
ENV PATH $GOPATH/bin:$PATH
 
COPY docker/entry.sh /docker-entrypoint
RUN chmod u+x /docker-entrypoint

dstroot

package main

import (
	"encoding/json"
	"fmt"
	"log"
	"net/http"
	"net/url"
)

dstroot

# Set "Smart" Relay Host
sudo sed -i.bak -e 's/DS$/DSsmtp.west.cox.net/' /etc/mail/sendmail.cf
# Restart Sendmail
/etc/init.d/sendmail restart

dstroot

curl -w "\nTotal time: %{time_total}\nTime pretransfer: %{time_pretransfer}\nTime starttransfer: %{time_starttransfer}\nSize download: %{size_download}\n Speed download: %{speed_download}" www.vizilinkz.com