React Hooks Main Points To Note From Documentation

Spread the love

useState() :

  1. Takes One argument – the initial value of variable
  2. Uses Array destructuring feature.
  3. e.g. :=
  4. 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() :

  1. 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.
  2. When you call useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM.
  3. Effects may also optionally specify how to “clean up” after them by returning a function.
  4. e.g.
useEffect(() => {
 ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
 return () => {
  ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
 };
});

Hooks are JavaScript functions, but they impose two additional rules:

  1. Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
  2. 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