React Hooks and it's rules

-> Hooks are function in react that lets you hook into features in react function based components
-> Hooks always start with 'use' i.e useState(), useEffect().
-> Hooks can only be called at the top level of the functional components, but we can define and use our own hooks and use it anywhere 
in the functional components.

-> Here are some of the hooks we use in react function based components

useState(); =>
        Syntax: const [count, setCount] = useState('initialState');
        params:
                count: in this example count is the counter that changes according to the function
                setCount: is the function or setter that changes the count
                initialState: is the initial state of the count that we can use
        
        Example:
        
        import React, { useState } from 'react';
        function Example() {
          const [count, setCount] = useState(0);

          return (
            <div>
              <p>You clicked {count} times</p>
              <button onClick={() => setCount(count + 1)}>
                Click me
              </button>
            </div>
          );
        }
        // in this example everytime the button is clicked the setCount (setter function) is fired up that changes the value of
           count and returns it in the screen

-----------------------------------------------------------------------------------------------------------------------------------------

  useEffect(); 
         -> this hooks lets you use side effects in a function on components i.e whenever a component re-renders the side effect fires on
         
         -> side effect is whenever we do something that effects the state of the component the side effect function fires up.
         
         -> first the useEffect returns a function with the details of what we want to do when the state of component changes.
         
         -> after the first intructions the return statement is added that returns the instructions (cleanup) find the example below.
             everytime useEffect is used the return statement is executed first, to clean up whatever the last useEffect did.
            Example: samjhyn aik user netflix website pe jata hai or usay 'Please subscribe' ka option nazar ata hai, ab wo usay subscribe
            karta hai, phr jab wo dobara netflix ki website pe jata hai usay same wohe 'Please subscribe' ka option nazar ay ga,
            this is called cleaning up, kyn k return is exectued first whenever the useEffect is used. that's why we see the please subscrible
            again instead of last time credentials.
         
         Syntax: useEffect((function, return(instructions)),[nameofcomponent])
         
         Params: function -> instructions to run whenever the state of component changes
                 
                 nameofcomponent(optional) -> this one is optional, and takes the name of the component that we want to check for changes,
                                              if nothing is declared then the useEffect's function will execute everytime a 
                                              component updates.
                                              if an empty array [] is declared then the function instructions will run only once because
                                              no component is passed to check if there is any change.
                                             
                 return(instructions) -> holds the instructions of cleaning up
            
            
            
Example: 
                  import React, { useEffect, useState } from 'react';
                  export default function Main() {
                  const [count, setCount] = useState(0);
                  const [countTwo, setCountTwo] = useState(1);
                  
                  useEffect(() => {
                          console.log('render is working');
                          return (
                                  console.log('return is working')
                                   )
                                   }, [count])
                    return (
                    <div className="row justify-content-center">
                    <div className='col-md-5' style={{ marginTop: '200px', border: '3px solid black' }}>
                    <h1>Counter App</h1>
                    <h1>{count}</h1>
                    <button className='btn btn-success' onClick={() => setCount(count + 1)}> Increase </button>
                    <button className='btn btn-danger' onClick={() => setCount(count - 1)}> Decrease </button>
                    <button className='btn btn-primary' onClick={() => setCount(0)}> Reset </button>
          </div>
        </div>
    );
}

-> in the above program, the console.log('render is working') will run evertime there's a change in the state of the count
-> and the return statement will work everytime the useEffect runs

-------------------------------------------------------------------------------------------------------------------------------------

useRef();
         -> useRef is like a box that can hold the mutable value in it's .current property.
         -> useRef() returns an object where the inital value is stored as property, useRef only has one property i.e current
                example : const renderCount = useRef(0)
                          here useRef has initial value of 0 which is stored in renderCount as object property i.e
                          {current: 0}
         -> Difference between useRef and useState is that useRef presist between the renders of the component, ref does not cause
         your component to reupdate when it gets changed.
         
         Syntax:        const count=useRef('initial value')
         Params:
                        -> count is the the value that gets changed
                        -> initial value is the first value we assign to our variable and can be accessed as count.current.
                        
        Example: Suppose we have a scenario where we render how many times the button was clicked using useState and also print what the
                previous value was using useRef
                
                export default function Check() {
                const [count, setCount] = useState(0);
                const prevValue = useRef('N/A');

                useEffect(()=> {
                prevValue.current = count
                ,[count])

                return (
                        <div className='main-div'>
                                <p>You clicked {count} times and previous number was {prevValue.current}</p>
                                <button 
                                        onClick={() => setCount(count + 1)}
                                >
                                Click me
                                </button>
                        </div>
                        )
                    }

                Here we update the value of count with the help of useState, then we assign that count to prevValue using useRef
                to show the previous value everytime the state of count changes.
                
 ---------------------------------------------------------------------------------------------------------------------------------------
 
 
 useSelector Hook :
                    -> Allows us to extract data from the redux store i.e we can access the data presented in redux store using 
                    useSelector() hook.
                    Syntax: const myState = useSelector((callBackFunc))
                    Params: we initialise a variable to hold the store from the redux
                            callBackFunc ->  The selector will be called with the entire Redux store state as its only argument.
                            
                            
-----------------------------------------------------------------------------------------------------------------------------------------------

RULES OF HOOKS:
                Below are some of the rules that should be followed while using react hooks.
               
               -> Hooks are always used on top level of the react component, before any early returns
                  By following this rule you ensure that Hooks are called in the same order each component renders.
               -> Hooks should not be called in loops, conditions or nested functions
               ->