useState() :
- Takes One argument – the initial value of variable
- Uses Array destructuring feature.
- e.g. :=
- const [variableName, functionName] = useState(value)
Where : variableName : that will be stored in state
functionName: The that will be used to set the value of variableName
value : the initial value of variable variableName
useEffect() :
- The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.
- When you call useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM.
- Effects may also optionally specify how to “clean up” after them by returning a function.
- e.g.
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
Hooks are JavaScript functions, but they impose two additional rules:
- Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
- Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks