Rendered more hooks than during the previous render. when posting form data with React Hooks - reactjs

Question

Ran into a problem with hooks today. I know there is a similar post, and I read the rules of using hooks. Right now when I post my form, it gives me that error. And I know that's because my hook is INSIDE an if statement. But how can I get it out? I don't know how else to use this hook if it's not in a function or a statement. Any advice would be greatly appreciated. Here is the code:
import React, { FunctionComponent, useState, useEffect } from 'react';
import usePost from '../hooks/usepost'
import Article from './article';
interface ArticlePosted {
title: string,
body: string,
author: string
}
const Post: FunctionComponent = () => {
const [details, detailsReady] = useState({})
const postArticle = (e) => {
e.preventDefault()
const postDetails = {
title: e.target.title.value,
body: e.target.body.value,
author: e.target.author.value
}
detailsReady(postDetails)
}
if (Object.keys(details).length !== 0) {
console.log(details)
usePost('http://localhost:4000/kb/add', details)
}
return (
<div>
<form onSubmit={postArticle}>
<p>
Title <input type='text' name='title' />
</p>
<p>
Body <textarea name='body' rows={4} />
</p>
<p>
Author <input type='text' name='author' />
</p>
<button type='submit'>Submit Article</button>
</form>
</div>
);
};
export default Post;
Custom Hook:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const usePost = (url, postDetails) => {
//set empty object as data
console.log(url, "DFLSKDJFSDLKFJDLKJFDLFJ")
console.log(postDetails)
useEffect(() => {
console.log('usePost running')
axios.post(url, postDetails)
.then(res => {
console.log(res)
return
})
}
, [postDetails]);
};
export default usePost

Answer 1

You can move the if-statement logic into the usePost hook.
const usePost = (url, postDetails) => {
useEffect(() => {
if (Object.keys(postDetails).length === 0){
return console.log('Not posting'); // Don't post anything if no details
}
// Otherwise, post away
console.log('usePost running')
axios.post(url, postDetails)
.then(res => {
console.log(res)
return
})
}
, [postDetails]);
};