DEV Community: thatFemicode

Pass Data from children Component to Parent Component in ReactJs

thatFemicode — Mon, 08 Aug 2022 19:01:00 +0000

Been studying for Frontend React interviews the past few weeks should I get one and came across a question from the guide I was using and honestly got confused because I know of passing data from Parent to child since React is unidirectional and when doing that Vice versa, passing data from child to parent you use either the Context API for or state management libraries like Redux, Mobx or Recoil, FYI I am only familiar with Redux but found an interesting answer to the question since the question said not to use either Context API or Redux or any state management library so after googling and the regular Stackoverflow, reading some medium articles and reading the React Docs a little I found out you can actually pass data from child to parent using CALLBACKS.

I was confused at first then I remembered according to MDN docs:
A callback function is a function passed into another function as an argument. This call back function is then invoked inside the outer function to complete some kind of routine or action.

Procedure

There are basically two steps to achieve this process and I will be listing them and creating a component as we go

Creating a Parent component and then creating a callback function in the parent component

function ParentComponent() {
  const [team, setTeam] = useState("");

This here is the callback function that will be passed as a prop to the childcomponent
  const addTeam = (team) => {
    setTeam(team)
  }

  return (
     <>
    <h3>This is the Parent Component that we 
        will be focusing on
    </h3>
    <h1>Your selected team is {team} </h1>
Below, the addTeam function is then passed into the child component as a prop
    <ChildComponent addTeam={addTeam}/>
     </>
  );
}

Creating structure of the ChildComponent

const ChildComponet = ({ addTeam }) => {
The addTeam function will then be used to push the data(team) selected back to the ParentComponent
  const teams = ['LA Clippers', 'Boston Celtics', 'Cleveland Cavilers', 'Memphis Grizzlies'];

  return (
    <div>
      <h3>Choose Your Team in the child 
          component
      </h3>
      <ul>
        {teams.map(team, index => {
          return (
            <li key={index} onClick={() => addTeam(base)}>
              {team}</span>
            </li>
          )
        })}
      </ul>
      )}
    </div>
  )
}

In the ChildComponent we simply used an onClick property to handle user click and then the data clicked is passed to the parent component and your selected team is displayed on your screen, the action is thereby complete.

Conclusion

Data has successfully been passed from the ChildComponent to to the ParentComponent and the unidirectional flow of react is beaten. If you feel I made a mistake, kindly hit me to tell me what I missed, thanks for reading.

Passing Data (states) through React Router

thatFemicode — Sun, 13 Mar 2022 17:31:06 +0000

Introduction

I was working on a side project recently in React and i wanted to pass data(state) from a component (Page) that was not in my initial component to another component(page). This might sound confusing but let me explain, basically the component i wanted to pass this particular state to was not imported to my component because it was a stand alone page i.e. had a different route, this was giving me issues for about a day till i started going through the react router docs and found out that you can pass state with Link component and useNavigate hook from react-router-dom routing package for react.
This article shows you a elegant approach to passing data via the Link component and useNavigate hook and accessing the data passed with the useLocation hook which is just a simple technique. I will display code using React functional components. Without further ado, let's get into it.

Passing Data

Data known as state can be passes via the Link component in the same way we pass props but it has a certain key (name) that has to be given to it in order for the data to be retrieved via the useLocation hook and also with the useNavigate hook also to be retrieved via the useLocation hook.

I'll be explaining both methods and how they can be done.

Link

import { Link } from 'react-router-dom';
const item = () =>{
//data to be passed
const Data = {
  name: 'Femi',
  phoneNumber: 123
}
<Link to="/some-where" state={myData}>Link Text</Link>
}

the above shows the Item (Route) component that we passed the data from, we will be retrieving the data below in Profile (Route) component.

useNavigate

import { useNavigate } from 'react-router-dom';
const item = () =>{
  const nav = useNavigate();
//data to be passed
const Data = {
  name: 'Femi',
  phoneNumber: 123
}
<div onClick={() => {
 nav("/some-where", { state:data});
}}>Clickme
</div>
}

The below shows how data is retreived after it has been passed by the two methods above.

import { useLocation } from 'react-router-dom';
const Profile = () =>{
const location = useLocation();
//the data here will be an object since an object was
const data = location.state;
console.log(data);
<p>data.name</p>
<p>data.phoneNumber</p>
}

Illustrating the above in a simple project

I'm guessing most of us can set up a react project with the traditional npx-create-react-app appname method, if you dont kindly check on how to do this from the react docs.

I will be using just the Link component to shocase this little build
Three Major component here.

App.jsx
Home.jsx
Profile.jsx

//App.jsx

import React from "react";

// import things from react-router-dom
import { BrowserRouter, Routes, Route } from "react-router-dom";

// import pages
import HomePage from "./Home";
import ProfilePage from "./Profile";
function App() {
  return (
<BrowserRouter>
  <div style={{padding: 30}}>
    <Routes>
 <Route path="/" element={<HomePage/>} /><Route path="/about" element={<ProfilePage />} />
   </Routes>
 /div>
 </BrowserRouter>
  );
}

export default App;

//Home.jsx

import { Link } from "react-router-dom";

const HomePage = () => {
  // this is for the first Link
  const data1 = {
    from: "David",
    message: "Welcome to David.com",
    return (
    <>
      <h1>Home Page</h1>
      <p>
        <Link to="/about" state={data1}>
          Go to Profile Page
        </Link>
      </p>
    </>
  );
};

//Profile.jsx

import { useLocation, Link } from "react-router-dom";

const Profile = () => {
  const location = useLocation();
  const state = location.state;
  console.log(state);
  return (
    <>
<h1>Profile page</h1>  
   <div>
      <h3>Passed data:</h3>
       <p>From: {state.from}</p>
       <p>Message: {state.message}</p>
       <p>Timestamp: {state.timestamp}</p>
    </div>
      <Link to="/">Go Home</Link>
    </>
  );
};

Conclusion

You can now pass data with Link components or useNavigate hook from react-router-dom package provided you use the useLocation to get access to the passed data. If you feel i made a mistake, kindly hit me to tell me what i missed, thanks for reading.

Intersection observer API

thatFemicode — Mon, 08 Nov 2021 23:27:42 +0000

Modern websites depend on scroll events that is the Cliché way of handling scrolling (window.scrollY). Scrolling can trigger lazy-loading of images and data and so much more. Unfortunately these scroll events are unreliable and intensive to use in my opinion and causes implementation issues which leads to poor browser performance.

The Intersection Observer API was created as a solution to solve the issues associated with "scroll events". It is browser API that provides users a way to observe given elements and monitor changes in their intersection like the name says "INTERSECTION" with a given ancestor element or the viewport (Browser window) itself.

Talking about the problem with the current implementation which is the scroll event. Consider a modern website , there are a lot of scroll events going on that we do not notice as users. The ads on the site load when scrolled into view, new contents load when the bottom of the page is reached, elements animate from time to time, and images are loaded lazily at times as the user reached them (Note: not all sites lazy load images). I myself have only done this once. These scroll events rely basically on countless loops calling performance intensive methods like the Element.getBoundingClientRect() to get the required position information.

When these methods run, its all on the main thread and as we know JavaScript is a single threaded language meaning an issue with one causes a break in the code. ** The Intersection Observer API passes off management of intersection events to the browser by using callback functions tied to the intersection status of specific elements. The browser can manage these events more effectively, optimizing for performance.**

The API is currently supported on most browsers, Chrome, Edge, Firefox and even Safari, which is pretty nice.

Lets take a look at some of the Concepts and basic usage of the observer.

Concepts & Basic Usage

To fully understand why the Intersection Observer API is so much better for performance, let’s start with a look at the basics.

Definitions

A few key terms are used to define any instance of an Intersection Observer. The root is the element which waits for an object to intersect it. By default, this is the browser viewport, but any valid element may be used.

While the root element is the basis of a single IntersectionObserver, the observer can monitor many different targets. The target may also be any valid element, and the observer fires a callback function when any target intersects with the root element.

Checkout the GIF in the link below to get a bit of visual representation.
!(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zi0922bwgvzlrsz5p1u.gif)

Basic Usage

Setting up a simple IntersectionObserver is straightforward. First, call the IntersectionObserver constructor. Pass a callback function and desired options to the constructor function:

const options = {
    root: document.querySelector('#viewport'),
    rootMargin: '0px',
    threshold: 1.0
};
const observer = new IntersectionObserver(callback, options);

As seen above, a few options are available to set in the constructor:

root

The root is the element which is used to check for intersections of the target element. This option accepts any valid element, though it’s important that the root element be an ancestor of the target element for this to work. If a root isn’t specified (or null is the provided value), the browser viewport becomes the root.

rootMargin

The rootMargin value is used to grow or shrink the size of the root element. Values are passed in a string, with a CSS-like format. A single value can be provided, or a string of multiple values to define specific sides (e.g. '10px 11% -10px 25px).

threshold

Last, the threshold option specifies the minimum amount the target element must be intersecting the root for the callback function to fire. Values are floating point from 0.0 - 1.0, so a 75% intersection ratio would be 0.75. If you wish to fire the callback at multiple points, the option also accepts an array of values, e.g. ~[0.33, 0.66, 1.0]~.

Once the IntersectionObserver instance is created, all that’s left is to provide one or more target elements for observation:

const target = document.querySelector('#target');
observer.observe(target);

From here, the callback function will fire anytime the target(s) meet the threshold for intersection

const callback = function(entries, observer) {
    entries.forEach((entry) => {
        // do stuff here
    });
}

Calculation Intersections

It’s important to understand how intersections are calculated. First, the Intersection Observer API considers everything to be a rectangle for the sake of this calculation. These rectangles are calculated to be the smallest they can possibly be, while still containing all target content.

Check the GIF below to get a visual representation
!(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8fiu3aiw33319pnqag5.gif)

Beyond the bounding boxes, consider any adjustments to the bounding box of the root element based on rootMargin values. These can pad or decrease the root size.

Check out the GIF below to get a visual representation of the bove

!(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbslr3nm3gik3kizccnq.gif)

Finally, it’s crucial to understand that unlike traditional scroll events, Intersection Observer isn’t polling constantly for every single change in intersection. Instead, the callback is only called when the provided threshold is reached (approximately). If multiple checks are required, simply provide multiple thresholds.

You want to learn more, check out this series by Kevin Powell i used in getting an understanding of the intersection observer API
Kevin Powell: Link

Scope, Scope Chain and Lexical Environment 1

thatFemicode — Mon, 23 Aug 2021 15:49:00 +0000

Introduction

Scope in JavaScript is related to lexical environment and if you understand lexical environment you will understand scope, scope chain and also assist in understanding closure i talked about last week. I hope this wont be too long because it took me a while before i got the understanding and i had to write extensively on it to better understand it, like i said there are different types of people and how we retain information is different. Lets Dive in 🛶.

function num(){
    console.log(c)
}
let c = 30
num()

Calling this function, JS engine (V8) in the browser will try to find c in the local memory space of the function num() when it is invoked.

Running the code above we get 30 because V8 looked inside the function and did not find the variable inside the function and since the variable is not present inside that function local memory, it looks inside the GLOBAL object, i am sure we all know what the GLOBAL object is.
NB: Also like a trick i used to wrap this around in my head, the variable was executed in the global object so the variable c can be accessed via SCOPE CHAIN, dont worry, we will see what SCOPE CHAIN is after we touch on some concepts regarding lexical environment so the understanding can be better.

Looking at another Instance of the function below

function num(){
    a()
function a(){
console.log(c)
}
}
let c = 30
a()

What do you think the output of this function will be? You can copy and paste the code in your browser console, it will be 30 because invoking this function will also access the variable C in the global object (scope) and output 30 because function a() had to go up just 1 level in the scope chain to find the variable c which was inside the global object.

function num(){
let c = 30
    a()
function a(){
console.log(c)
}
}
console.log(c)
a()

Lets go in another direction an try something now and access C when the variable is inside the function num() above, in this case what do you think the function will output? Try it in your console and see. It will output a reference error saying C is not defined because the variable is locally scoped to that function and it cant be accessed outside the function. From all this done, we can say SCOPE simply means where you can access a specific variable or a function in our code. From the examples above we asking, what is the scope of variable C like i said at the beginning, SCOPE is dependent on the lexical environment.

So as not to make this boring and too long because this was a lot to consume so digest on this and i will be posting the part2 of the article next week.
Let me give some simple definitions that can be researched upon before the next article to better prepare

Lexical Environment

Lexical environment simply means local memory along with lexical environment of its parent.
What is Lexical? Lexical simply means hierarchy or in order and in coding terms, where that specific code is present physically. Looking at the header for this post, those yellow shaded portions are regarded as lexical environment.

Wow, this was a lot and hopefully you get the gist now, i always had issues understanding it till i read up and watched some videos that really explained the concept well, like i said at the beginning there are people who process information different and if you are a junior dev out there like me, this is probably for you. Thank you for reading. If anyone reading this feel like i made a mistake or my thought process for this was not explanatory enough, I'd be glad to receive advice (constructive criticism) and learn more. Have a great day and journey ahead.🚀♾

JavaScript Closures

thatFemicode — Mon, 16 Aug 2021 11:48:01 +0000

Closures

Yes i finally found the courage to post about topics i have been learning and documenting about this past few months after. Its time i start putting my self out there and haring knowledge whilst learning because hoarding and not sharing what you have learnt as you continue on your journey wont help the next set of engineers coming in as there might be just that one person that processes information the same way you do, i myself, definitely not the smartest person so i have mechanisms that i use to study, for the better part of my coding journey i didnt really use my studying mechanism but rather used something i always labelled as Photographic memory to Understand concepts which i found out was not working for me, ever since going back to my default settings, lol, i began to get a good grasp of concepts very well, not to digress, this is a discussion for another day. Lets get into the main thing JAVASCRIPT CLOSURES. This will be really short

What are closures or what is a closure? 🤔

Closure can be simply defined as simply a function bundled together with reference to its LEXICAL ENVIRONMENT i.e.(Parent Scope). We probably use closures at times and we dont even know we do, hell i worked on something a while back and didnt even know 😂
Lets look at it from this angle: a function which is a first-class object in JS has something like a family tree, the function in this case being the father built a house and has children in this case a child which is the function that is returning, those children or that child will always remember that house even after the father dies or in the case of our functions gets executed, because they were or he/she was brought up in that house, if the house has a chair, the children or child in this case the functions will always remember the color of the chair. Get it now? If you dont let us take simple function and explain this concept

function father(){
let chairColour = "red"
function childOne(){
console.log(chairColour)
}
return childOne
}

Calling father() will just be called or invoked but nothing will happen but calling father()() something like an IFFE will return the chairColor

or you can do something like this
let child = father()
child()
in this case we call the father, it gets executed and returns a child to continue with its Legacy, permit me to say this. Lol
then the child gets the child variable gets the returned function and can then be called

something like a the Scope chain where the returned function will look up its family tree and remember "Oh i cant find the variable or common thing in my own family house but its in my fathers house where i grew up". Not to make this very long as this is my first article and i would not want to bore you. so lets talk about the Advantages and disadvantages of function
ADVANTAGES

Data Privacy and Encapsulation (Variables in functions that are not accessible outside that function)
Memoize && Once (This two are higher order functions, i myself do not really know what they are lol, hopefully i get to explore them)
Function currying
Module pattern(A concept in JavaScript) Disadvantages
Memory Leaks
Overconsumption of memory because anytime a closure is formed because those closed variables are not garbage collected. It is just accumulating a lot of memory.

What is Garbage Collector?
It is a program in browser or JS engine which frees up unutilized memory because JS is a high level language.

Hopefully you get the gist of how closures behave now, i always had issues understanding it till i read up and watched some videos that really explained the concept well, like i said at the beginning there are people who process information different and if you are a junior dev out there like me, this is probably for you. Thank you for reading. If anyone reading this feel like i made a mistake or my thought process for this was not explanatory enough, I'd be glad to receive advice (constructive criticism) and learn more. Have a great day and journey ahead.