Earlier, How we use any Hook

import  React, { useState,useEffect } from  'react';
import  axios  from  'axios'
function  App(){
    function  useTodos(){
        const [todos, setTodods] =  useState([])
        useEffect(()=>{
        axios.get("https://sumserver.100xdevs.com/todos")
        .then(res=>{setTodods(res.data.todos)})
    },[])
    return (
        <div>
            {todos.map((eachTodo)=>  <Track  todo= {eachTodo}/>)}
        </div>
    )
}
function  Track({todo}){
      return <div>
            {todo.id}<br/>
            {todo.title}<br/>
            {todo.description}<br/>
            {todo.completed}<br/>
    </div>
}

export  default  App

Now writing of Custom HOOK

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

// A custom hook is effectively a function
function  useTodos(){
        const [todos, setTodods] =  useState([])
        useEffect(()=>{
        axios.get("https://sum-server.100xdevs.com/todos")
        .then(res=>{
        setTodods(res.data.todos)
        })
    },[])  
    return  todos
}

function  App(){
    const  todos  =  useTodos()
    return ( 
        <div>
        {todos.map((eachTodo)=>  <Track  todo= {eachTodo}/>)}
        </div>
    ) 
}

function  Track({todo}){
    return  <div>
        {todo.id}<br/>
        {todo.title}<br/>
        {todo.description}<br/>
        {todo.completed}<br/>
    </div>
}
export  default  App