DEV Community

Holden Gerner
Holden Gerner

Posted on

React Information Flow

What is Information Flow in React?

  • Helps with not only sending data from the parent component down to the child, creating a unidirectional data flow.

  • state is passed to the view and child components.

  • actions are triggered from the view.

  • actions can update the state.

How can we send data from the parent to the child Component?

  • In order to send data down to the child from the parent component a prop is used.

  • The child cannot modify the data by themselves, creating a clean data flow is followed.

Benefits:

  • This allows less errors to be made and allowing more control over the program.

  • Easier to debug due to the fact that you know what is coming from which components.

  • A lot more efficient due to libraries are aware of the limitations or boundaries of each aspect of the system.

Conclusion:

  • A state is always owned by only one component. Any data that is changed by a certain state in a component will only be affected in the component that are below that component (children).

  • The state change on one component will never affect the components above it on the component tree (i.e parents,siblings).

Image description

Sources

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay