useReducer&useref

useReducer:

1. An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method.

2.useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. 

3.useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

import React,{useReducer} from 'react'

export default function HookRed() {

    // const initialstate = { count: 0 };

    // function increment(){

    //     return {

    //         type: 'increment'        

    // }

// }

    // function decrement(){

    //     return {

    //         type: 'decrement'

    //     }

    // }

    function reducer(state, action) {

        switch (action.type) {

            case 'increment':

                return { count: state.count + 1 }

            case 'decrement':

                return { count: state.count - 1 }

        }

    }

    // There are two different ways to initialize useReducer state.

        // const [state, dispatch] = useReducer(reducer, initialstate);

        const [state, dispatch] = useReducer(

            reducer,

            {count: 0}

          );

        return (

            <div>

                       Count: {state.count}

      <button onClick={() => dispatch({type: 'decrement'})}>-</button>

      <button onClick={() => dispatch({type: 'increment'})}>+</button>

            </div>

        )

    

}

4.React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

5.React doesn’t use the state = initialState argument convention popularized by Redux.

There are two different ways to initialize useReducer state. You may choose either one depending on the use case. The simplest way is to pass the initial state as a second argument:

 const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}  );

/

Lazy initialization/

Useref:--

The useRef Hook allows you to persist values between renders.

It can be used to store a mutable value that does not cause a re-render when updated.

It can be used to access a DOM element directly.

1...

If we tried to count how many times our application renders using the useState Hook, we would be caught in an infinite loop since this Hook itself causes a re-render.

To avoid this, we can use the useRef Hook.

useRef() only returns one item. It returns an Object called current.

When we initialize useRef we set the initial value: useRef(0).

It's like doing this: const count = {current: 0}. We can access the count by using count.current.

2.In React, we can add a ref attribute to an element to access it directly in the DOM.

uncontrolled form:----

no value no onchange function

one time value retrieval like [subscribtion only once]

validation on submit

import React,{useRef} from 'react'

export default function HookRref1() {

    const inputelement=useRef();

    const Show=()=>{

// inputelement.current.focus();

alert(inputelement.current.value);

    }

    return (

    <div>

        <input type="text" ref={inputelement}  />

        <button onClick={Show}>click</button>

    </div>

  )

}

....................................userreducer......

import React,{useReducer} from 'react'

const reducer=(state,action)=>{

    switch(action.type){

       case "Increment":

        return {count:state.count+1,color:'blue'};

        default:

            return state;

    }

}

export const SecondHook = () => {

    const [state, dispatch] = useReducer(reducer,{count:0, color:'red'})

  return (

    <div>

        {state.count}

        {state.color}

        <button onClick={()=>dispatch({type:'Increment'})}>click</button>

    </div>

  )

}