React Hooks : Azure Functions

Continuation...

First take a look at React Hooks

React Hooks only work in functions, so we will create a React Function Component. Up to now we've only used React class components.

No worries it's easier to use Function Components as we will see.

The useState & useEffect Hooks

• Import these two hooks first.

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

• useState is a function in React, used for states.

• useEffect is used as a callback from the React rendering cycle. It's the recommended place to issue HTTP requests.

useState syntax

• The pattern for useState is:

const [data, setData] = useState("");

It is saying we want 2 constants, one named 'data' and the other 'setData'. 'data' will be a property of type any, and 'setData' will be a function. The 'useState("")' part sets the data variable to an empty string.

The term 'hook' is an
age old programmers' term meaning there is a way to break into code flow using a function entry point or hook.

useEffect
The word effect in JavaScript is used to denote a side-effect, which means something to be changed.

useEffect(async () => {
let response = await fetch("https:jesting.azurewebsites.net/api/Function1");
let answer = await response.text();
    setData(answer);
  });

Breaking this down:

useEffect(async () => { ... }

We want React to call us at useEffect time. When it calls us we want this to run Asynchronously, thus the word 'async'.

'() =>' is just a shortcut for defining a function like this: 'function(){}'. The open curly brackets are a code block where we'll place our code.

Ok we now have our async function defined.

Sending out an HTTP Request

let response = await fetch("https:jesting.azurewebsites.net/api/Function1");
    let answer = await response.text();
    setData(answer);

'fetch' is a built in way to send an HTTP request from the browser. It returns a Promise. We will use the Async/Await pattern to handle the promise.

Promises just mean, ok we'll do the work requested, later.

We pass the URL to our Fetch function which awaits the 'response'. Once the 'response' returns, then code goes to the next step.

'response.Text()' is also an asynchronous function too, we 'await' for it to complete. When it does we have the 'answer'.

We then use the 'setData' function to update the state. From there React takes care of the updates!

The complete code:

import React, { useEffect, useState } from "react";
export default function GetCloudData() {
  const [data, setData] = useState("");

  useEffect(async () => {
    let response = await fetch("https:jesting.azurewebsites.net/api/Function1");
    let answer = await response.text();
    setData(answer);
  });

  return (
    <div>
      <h1>
        The Azure Function returned : 
      </h1>
      <p>{data}</p>
    </div>
  );
}

Summary:

• The Azure Function is also called a 'microservice' or a 'serverless end point' it is the current trend.
• This demonstrates we don't need back-end architectures as we did before. We just need Cloud services.
• We learned two hook parts in React.
• We learned about React hook cycles.
• Our small function controls all of it's own state. This is a huge design point known as Single Responsibility.

The pattern shown here is an excellent way to move forward in 2021.

JWP2021 React Azure Function Hooks