azure-devops-extension-sdk | Client SDK for developing Azure DevOps extensions | Azure library

Writing a functional react component is simple with the new React Hooks. In the example below, I'm using useState and useEffect. The useState hook is synonymous with this.state/this.setState in a class-based React component. The useEffect hook is similar to componentDidMount+componentDidUpdate. It also is capable of being componentDidUnmount.

The way the code will execute is from top to bottom. Because it's functional, it will run through once and render with the default state set at the argument to useState. It will not block on getting data from the API in the useEffect function. Thus, you need to be able to handle loading without having data. Anytime props.apiConfig or props.id changes, the component will re-render and all the useEffect again. It will only call useEffect if props.apiConfig and props.id do change after first run. The only nasty part is that useEffect cannot be an async function, so you have to call the function getDataWrapper without using await. When the data is received by the API, it will store the data in state, which will trigger a re-render of the component.

To Summarize:

1. Render once with default state
   • Call useEffect, which calls getDataWrapper
   • return component with initial values in useState
2. Once data is received by the API in the useEffect/getDataWrapper function, set the state via setState & set isLoading to false
3. Re-render the component with updated value that setState now contains
   • Avoid the useEffect control path since the values in the second argument of useEffect have not changed. (eg: props.apiConfig & props.id).