Xtykutl

I have just began playing around with React hooks and am wondering how an A request should look?

I have tried many attempts, but am unable to get it to work, and also don't really know the best way to implement it. Below is my latest attempt:

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



const App = () => {

    const URL = 'http://api.com';

    const [data, setData] = useState({})



    useEffect(() => {

        const resp = fetch(URL).then(res => {

          console.log(res)

        })

    });

    return (

        <div>

          // display content here

        </div>

    )

}

You can make a function called useFetch that will implement useEffect. This will trigger the lifecycle hooks on componentDidMount and the componentDidUpdate. A function passed to useEffect will run after the render is committed to the screen.

Here is a demo in code sandbox.

See code below.

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



const useFetch = (url, defaultData) => {

    const [data, updateData] = useState(defaultData)



    useEffect(async () => {

        const resp = await fetch(url)

        const json = await resp.json()

        updateData(json)

    }, [url])



    return data

}



const App = () => {

    const URL = 'http://www.example.json';

    const result = useFetch(url, {})



    return (

      <div>

        {JSON.stringify(result)}

      </div>

    )

}

Works just fine... Here you go:

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



const useFetch = url => {

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

  const [loading, setLoading] = useState(true);



  useEffect(async () => {

    const response = await fetch(url);

    const data = await response.json();

    const [item] = data.results;

    setData(item);

    setLoading(false);

  }, );



  return { data, loading };

};



export default () => {

  const { data, loading } = useFetch('https://api.randomuser.me/');



  return (

    <div>

      {loading ? (

        <div>...loading</div>

      ) : (

        <div>

          {data.name.first} {data.name.last}

        </div>

      )}

    </div>

  );

};

Live Demo

Great answers so far, but I'll add a custom hook for when you want to trigger a request, because you can do that too.

function useTriggerableEndpoint(fn) {

  const [res, setRes] = useState({ data: null, error: null, loading: null });

  const [req, setReq] = useState();



  useEffect(

    async () => {

      if (!req) return;

      try {

        setRes({ data: null, error: null, loading: true });

        const { data } = await axios(req);

        setRes({ data, error: null, loading: false });

      } catch (error) {

        setRes({ data: null, error, loading: false });

      }

    },

    [req]

  );



  return [res, (...args) => setReq(fn(...args))];

}

You can create a function using this hook for a specific API method like so if you wish, but be aware that this abstraction isn't strictly required and can be quite dangerous (a loose function with a hook is not a good idea in case it is used outside of the context of a React component function).

const todosApi = "https://jsonplaceholder.typicode.com/todos";



function postTodoEndpoint() {

  return useTriggerableEndpoint(data => ({

    url: todosApi,

    method: "POST",

    data

  }));

}

Finally, from within your function component

const [newTodo, postNewTodo] = postTodoEndpoint();



function createTodo(title, body, userId) {

  postNewTodo({

    title,

    body,

    userId

  });

}

And then just point createTodo to an onSubmit or onClick handler. newTodo will have your data, loading and error statuses. Sandbox code right here.

Here's something which I think will work:

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



const App = () => {

    const URL = 'http://api.com';

    const [data, setData] = useState({})



    useEffect(async () => {

      const resp = await fetch(URL);

      const data = await resp.json();



      setData(data);

    }, );



    return (

      <div>

        { data.something ? data.something : 'still loading' }

      </div>

    )

}

There are couple of important bits:

• The function that you pass to useEffect acts as a componentDidMount which means that it may be executed many times. That's why we are adding an empty array as a second argument, which means "This effect has no dependencies, so run it only once".


• Your App component still renders something even tho the data is not here yet. So you have to handle the case where the data is not loaded but the component is rendered. There's no change in that by the way. We are doing that even now.

Traditionally, you would write the Ajax call in the componentDidMount lifecycle of class components and use setState to display the returned data when the request has returned.

With hooks, you would use useEffect and passing in an empty array as the second argument to make the callback run once on mount of the component.

Here's an example which fetches a random user profile from an API and renders the name.

function AjaxExample() {

  const [user, setUser] = React.useState(null);

  React.useEffect(() => {

    fetch('https://randomuser.me/api/')

      .then(results => results.json())

      .then(data => {

        setUser(data.results[0]);

      });

  }, ); // Pass empty array to only run once on mount.

  

  return <div>

    {user ? user.name.first : 'Loading...'}

  </div>;

}



ReactDOM.render(<AjaxExample/>, document.getElementById('app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>



<div id="app"></div>