React needs shared data

ikhlas firlana
2 min readFeb 15, 2024

There are stories in middle laziness of explaining shared data in react.

Someone just got an internship at a boss startup PT Success Firlana Jaya.

He started the first day to create a React application. After going through the tutorial, he really stuck and depressed.

He remember ask anything to his boss, then he immediately went to the Boss.

Intern: Boss, I have a problem. I dunno how to communicate between components.

Boss: (darn you know i cannot do code) wait! I will call someone.

Luxury Boss Phone’s: ring…ring..

Senior: Hello Boss! What up?

Boss: Come here master! Somebody needs your guide.

Senior is coming into the boss room.

Senior: Yes boss, who will get enlightenment?

Boss: here a new intern needs your guide to the heavenly haven! you know what i means (wink.. wink..).

senior understand what it means. then now he have new title “Master”.

Intern: Thank you boss. Master, I need your guidance. How do two components react and talk to each other?

Master: My child, There are some ways to send messages to people (components). The Common way is to talk with their parents (prop Drilling).

Intern: Oh my God! But master, they are too far from their parents. Can we find another way?

Master: Yes, there are some ways. Use React Context or React Redux.

Intern: It tools for delivery messages master?

Senior: Yes, it is common for our brethren to use. Listen. Here is the story.

A moment later and a bit of a bully, the intern grasped the situation.
He needs two components separate from each other.
Like the illustrations below.

simple two components

Then what he needs is to make another folder
or you can say “shared library” for use by each component.
It is like the illustrations below.

simple two components with shared library

Master: My child, now you know how to start with. I will share my noob source for examples.

React Context, you can see at this link.
https://github.com/ikhlas-firlana/react-shared-lib/tree/react-context.

React Redux, you can see at this link.
https://github.com/ikhlas-firlana/react-shared-lib/tree/react-redux.

After explanation, the title “master” has been taken.

Intern: Thank you master! Thank you Boss! I dunno what I can do without you.

Senior: Hussh. Don’t worry we have stories for ourselves.

Boss: Haha no need to worry. Now get back to work!

After a long time, I will start writing in a more interesting way.
go visit my blog.
Thank you for support.

--

--