React Hook function useEffect - reactjs

Question

Good Morning!
I'm starting react hooks, but it throws me the following error when wanting to use useEffect:
Line 4:5: React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
The code is the following:
profile.js
import React, { useEffect } from 'react';
function profile(props) {
useEffect(() => {
document.title = props.nameAtributte;
}, [props.nameAtributte])
return (
<div style={{background:"yellow"}}>
It's my profile component {props.nameAtributte}
</div>
);
}
export default profile;
App.js
import React, {useState, useEffect} from 'react';
import Profile from './components/profile';
//import logo from './logo.svg';
//import './App.css';
function App() {
const [nombre, changeName] = useState('Juan Parez');
function nombreInput_onChanged(e){
changeName (e.target.value);
}
return (
<div className="App">
<h1>{nombre} eres digno, suficiente e ilimitado</h1>
<input type="text" name="nombreInput" id="nombreInput" value={nombre} onChange={nombreInput_onChanged} />
<Profile nameAtributte={nombre}/>
</div>
);
}
export default App;
package.json
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
What could be happening ?
I am reviewing some solutions here, but they did not work for me.
Thank you very much for the help.

Answer 1

Components name must start with a Capital Letter . As your profile components name starts with 'p' react is not counting it as a valid functional component.
Just change the component name to Profile and it should work fine

Answer 2

One of the rules of JSX is the name of the components must proceed with an uppercase letter.
If your JSX file contains a component that is having a lowercase letter as an initial letter then React will refer to it as a built-in component like <span> or <div> not a react component.
The Dot-notation component like <UserContext.Provider> and any component which starts with a capital letter indicates that the JSX tag is referring to a React component.
That's why you were getting the error as
React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function
So, in your case, you only need to change the function name as
function Profile(){
//your code
}
You don't have to change the name of the file i.e profile.js, there is no such rule for that.
You can see the Official React hooks rule book from here.