please explain the error to me, Error: Rendered more hooks than during the previous render

useRandomJoke is a custom hook. Hooks should only be called at the top level of a component and as the custom hook already has the joke state, you don't need an additional state in the App component.

If you want to get a new joke after the component renders and every time the button gets clicked, you can do this:

const useRandomJoke = () => {
  const [joke, setJoke] = useState("");

  const fetchJoke = useCallback(() => {
    fetch("https://api.icndb.com/jokes/random")
      .then((res) => res.json())
      .then((data) => {
        setJoke(data.value.joke);
      });
  }, []);

  return [joke, fetchJoke];
};

export default function App() {
  const [joke, fetchJoke] = useRandomJoke();

  useEffect(() => {
    fetchJoke();
  }, [fetchJoke]);

  return (
    <div className="App">
      <h1>Random Jokes</h1>
      <p>{joke}</p>
      <button onClick={fetchJoke}>Click for a random joke</button>
    </div>
  );
}

You can't conditionally call React hooks, like in the onClick handler of the button, as this breaks the rules of hooks. I suggest refactoring the useRandomJoke hook to return the fetched joke and a function to fetch the next random joke. You also shouldn't mix async/await with Promise chains as this is an anti-pattern.

const useRandomJoke = () => {
  const [jokes, setJokes] = useState(null);

  const jokeFetch = async () => {
    const res = await fetch("https://api.icndb.com/jokes/random");
    const data = await res.json();
    setJokes(data.value.joke)
  };

  return [jokes, jokeFetch];
};

Then use the hook in the app.

function App() {
  const [joke, getJoke] = useRandomJoke();

  return (
    <div className="App">
      <h1>Random Jokes</h1>
      <p>{joke}</p>
      <button onClick={getJoke}>Click for Joke</button>
    </div>
  );
}

Well, there is more than one point to talk about here:

1- in React.js, you can only call custom hooks at the top level of your function's body (react recognizes any function starting with the keyword use as a hook)

function App() { 
  // top level is here
  
  const randomJokes = useRandomJoke()

  const [jokes, setJokes] = useState(); 
  return (
    <div className="App">
      <h1>Random Jokes</h1>
      <p>{jokes}</p>
      <button onClick={()=>{setJokes(useRandomJoke)}}>
        Click for Jokes
       </button>
    </div>
); } 
export default App;

2- In your example I understand you want to have a new joke each time onClick triggers, in order to do so, I don't think using a custom hook is the ideal solution here, since your custom hook runs the fetchJokes method only once on initial render (as you described in your useEffect hook), I understand a lot of people mention that useEffect is the place to make API calls, but it doesn't necessarily applies to all use cases, in your example it is simple, you don't have to use useEffect neither create a custom hook.

a possible simple solution:

function App() {
  // we always call hooks at the top level of our function
  const [jokes, setJokes] = useState();
  const fetchNewJoke = () => {
  
      fetch("https://api.icndb.com/jokes/random")
        //we'll run 2 "then"
        .then(
          // this will give us response and will return inform of 
           res.json
          (res) => res.json()
        ) //.json is a format
        .then((data) => {
          setJokes(data.value.joke);
        }); // now calling data from te returned values in res.json
    };
};

    return (
     <div className="App">
      <h1>Random Jokes</h1>
      <p>{jokes}</p>
      <button onClick={fetchNewJoke}>Click for Joke</button>
     </div>
    );
} export default App;