useState vs useReducer

useState vs useReducer

<em>(quote from&nbsp;</em><a href="https://reactjs.org/docs/hooks-reference.html#usereducer" target="_blank"><em>https://reactjs.org/docs/hooks-reference.html#usereducer</em></a><em>)</em>

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. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

(quote from https://reactjs.org/docs/hooks-reference.html#usereducer)

I'm interested in the bold part, which states that useReducer should be used instead of useStatewhen being used in contexts.

I tried both variants, but they don't appear to differ.

The way I compared both approaches was as follows:

const [state, updateState] = useState();
const [reducerState, dispatch] = useReducer(myReducerFunction);

I passed each of them once to a context object, which was being consumed in a deeper child (I just ran separate tests, replacing the value by the function that I wanted to test).

<ContextObject.Provider value={updateState // dispatch}>

The child contained these functions

const updateFunction = useContext(ContextObject);
useEffect(
  () => {
    console.log('effect triggered');
    console.log(updateFunction);
  },
  [updateFunction]
);

In both cases, when the parent rerendered (because of another local state change), the effect never ran, indicating that the update function isn't changed between renders. Am I reading the bold sentence in the quote wrong? Or is there something I'm overlooking?

reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

ReactJs Course | How to build a YouTube Clone using ReactJS

Hello, this is a new tutorial series about ReactJs. In this series, I will teach you two important topics. First, I will be teaching you what is ReactJs library and why this is so powerful and expandable. We will see what are the important...

Top Reasons to Choose ReactJS for Front-End Development - Prismetric

Why ReactJS is perfect choice for your next web application? Get to know all about ReactJS development and its benefits in detail for frontend development.

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Highcharts with Reactjs

#reactjs #highcharts #therichpost https://therichpost.com/highcharts-with-reactjs-working-tutorial/ Highcharts with Reactjs Please like, share and subscribe....