Managing UI State in a React App - DEV Community

Question

Accepted Answer

Introduction   UI State is the state that is only useful for controlling the interactive... Tagged with react, javascript.&#xA;      We&#x27;re a place where coders share, stay up-to-date and grow their careers.&#xA;  UI State is the state that is only useful for controlling the interactive parts of our React app. The other state being Server-cache(State&#x27;s stored on the server, and we store in the client for quick-access: like user data).useState is a Hook that lets you add React state to function components. If we have 2 sibling components that both need same state(or functions/methods), we need to lift that state to the least parent component and pass the data down to the components that need through props.Now, if some component far away in the component tree needs the state, you need to lift the state all the way to the top and pass props to all intermediate components to get the data down to the component that actually needs it.This is what is called prop drilling- passing data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around.Lets take a simple example:&#xA;Here, UserPanel component and UserPanelContent component are intermediate components acting as tunnels to get the data down to the Welcome component that actually needs the data.Instead of making components that render components and wiring props everywhere like this, you could compose things together through children props.Using children prop increases the ability to compose i.e it makes the UserPanel costomizable(such that you can choose what goes inside the Panel) and also it eliminates prop drilling.There are various situations where prop drilling can cause some real pain in the process of refactoring especially.Context is designed to share data that can be considered &#x201C;global&#x201D; for a tree of React components, such as the current authenticated user, theme, or preferred language. If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.&#xA; ~React docsIf 3 components require data(or methods), we choose a common parent and wrap it in a provider and then we wrap the components that require data/method in a consumer.Taking example from the previous code:&#xA;Here, the useContext hook gives us an extra, much prettier, way to consume context.&#xA;If you have a really large application and you have the entire thing surrounded by a Context Provider anytime you make a change to that state it is going to render everything that is nested under the provider which can make interactions feel slow. Adding useMemo increases performance which says hey if these values dont change dont render these components.  Many UI state managment tools are available like Redux, Mobx, Recoil, Jotai, XState which may be used but React is all you need to manage your applications UI state most of time.https://egghead.io/courses/react-state-management-in-2021-6732Templates let you quickly answer FAQs or store snippets for re-use.&#xA;              Vinicius Dias - Sep 22&#xA;            &#xA;              Matti Bar-Zeev - Sep 13&#xA;            &#xA;              Remi W. - Sep 22&#xA;            &#xA;              Aaron Gong - Sep 23&#xA;            DEV Community &#x2013; A constructive and inclusive social network for software developers. With you every step of your journey.Built on Forem &#x2014; the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community &#xA9; 2016 - 2021.&#xA;        We&#x27;re a place where coders share, stay up-to-date and grow their careers.&#xA;    &#xA;      We strive for transparency and don&#x27;t collect excess data.&#xA;

Managing UI State in a React App - DEV Community

Senior Software Engineer (2 roles, React OR Pytho

Senior Software Engineer (2 roles, React OR Python)

How to choose a Framework when making Web app

How to choose a Framework when making Web app

What you should be doing as an LLC Owner

What you should be doing as an LLC Owner

How to Resize Local Volume for a Virtual machine i

How to Resize Local Volume for a Virtual machine in Proxmox - How can I make ubuntu--vg-ubuntu--lv consume the entire disk space available

Should I use Configurer Await False in AspNet 6

Should I use Configurer Await False in AspNet 6

Microsoft.Common.CurrentVersion.targets(4678,5): e

Microsoft.Common.CurrentVersion.targets(4678,5): error MSB3027: Could not copy File

Linux service returns (code=exited, status=2)

Linux service returns (code=exited, status=2)

"WaitForWarmupCompletion" task was not given a val

"WaitForWarmupCompletion" task was not given a value for the required parameter of "Configuration"

Drupal 8 Composer Error webflow/drupal-core-requir

Drupal 8 Composer Error webflow/drupal-core-require-dev requires behat/mink

Unable to start Kestrel. System.InvalidOpera

Unable to start Kestrel. System.InvalidOperationException: Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found or is out of date

NullReferenceException: Object reference not set t

NullReferenceException: Object reference not set to an instance of an object

Dot Net Core 3.1 Link Tag Helpers not Clickable

Dot Net Core 3.1 Link Tag Helpers not Clickable

Solve Ionic Transpile Problem Ionic Serve: Error:

Solve Ionic Transpile Problem Ionic Serve: Error: Cannot find module '@angular/tsc-wrapper/src/tsc'

How I solved ionic serve that did not work [Solve

How I solved ionic serve that did not work [Solve Ionic Transpile Problem]

How to Scaffold or Generate a Custom Identity Logi

How to Scaffold or Generate a Custom Identity Login UI in Asp.Net Core 3.1