Forem: Kinginthenorthcodez

Data structure everywhere

Kinginthenorthcodez — Sat, 18 Feb 2023 17:51:36 +0000

See last time i talked about how data structures is everywhere around us.
And i start by making an analogue of an array data structure and how its everywhere in our lives. Now its time expand more on that and see what other data structures are and how do we use them in our everyday bustling lives.

Well if you're a programmer you obviously know that you could and can create an entire world of your imagination into a digital world and they is no shortage of variables in your construct.
But all these variables are inspired by what you get or altleast perceive in the real world.

So you have these two worlds, one you could test out the variables and the other you could live or are living out the variables, you have two world complementing each other. For example you have an Array data structure that you can use to understand persive dimensions in the digital world to modeling 3D -N dimensions that you couldn't but otherwise understand in the real world. Okay so lets get started. 😃

Arrays data structure

We start with Arrays data structure beacuse its the fundamental to most of the data structures that we have or know exist.
Defination of an array data structure is that, its one that stores or holds items of same type in a sequential or contiguous memory location and actions or operations on its elements are performed in sequence at the very least.
In the real world we have this playing out, your very growth is an arrangement of an array of growth. You start out small, and then big.
Your schedule or daily routine, your walking of every step you take provided you know the next step then you can skip to it otherwise its step by step or journey, your packing of your favorite things in a box or counting . The arrangement of the petals on a flower or the finger prints. And so on, all we have or are doing is a step by step process and a defined fixed size at the time of start. This way you can never grow any taller or bigger than whats already defined in your array structure (genetically ) or go beyond than whats already your destination of your journey.

So what you see here, is this fascinating implementation of such a data structure in the digital world by these very smart dedicated programmers. On a larger or more grandeur scale is the universe, in it many other other universes or worlds all but within other worlds otherwise, until we get to our world. Science call this dimensions or multiverse. And lo and behold these programmers figures it out that the array can have or hold multiple arrays in it.

Multidimensional Arrays

And arrays in digital world gets to hold or store other arrays in them.
So you have a 1dimensional array or simple array and a 2D, 3D, Nth D or multidimensional array. Allowing the digital world to visualize or render its world in any dimensional needed. This changed everything, we could now persive any dimension on our screens.

But soon the programmers would realise that thier digital world could only keep up this much with arrays data structure, now arrays would be limited only to that extent. Because no implementation hardware or software, can model a mathematical concept completely.To ensure predictability of such a powerful data structure constrained by its digital world, these clever and smart programmers devised a standard that would allow aleast not more than 10D (dimensions ) of array to be defined. As this is what most compilers would handle or they risk their digital world run into cheos😃.

To compasate for these limitations such as fixed size and sequential storage of data they had to look for new ways of storing data that could be stored at non-contiguous memory locations.It is important to recognize the limitations of a particular implementation. Often it will be possible to present several implementations of the same data type each with its own strength and weakness.And we going to see such data structures in our real world later on. Now lets see how this Array data structure is implemented, used in the digital world.
To be continued..

How State in React works?

Kinginthenorthcodez — Fri, 06 Jan 2023 06:54:07 +0000

Hello! It's me again, your React Toist😁. This is a 2/4 part article highlighting some React concepts, check React state in 2 min.Lets dive in🏊🏽.

Mutation on state

Mutation is the ability to affect change and react provides a clear rule or guidline on how to affect the react state.
React says no direct change is allowed on state, any changes or update should be done through the state function updater that react provides at the time of creating the state.
Lets consider this:

import React {useState} from 'react'
  const StateInReact= () =>{
   //creates and gives initial value
   const[title, setTitle]= useState('State in React!') 
    //Not allowed!
    title= "New state value"
   // Allowed
    setTitle('new state value')
  return(<h1>{title}</h1>) //access state
}

Scope and Access

In React state is either local to the compenent(component state) or global to all components(app state) also known as shared state. And this defines scope to which component can access that state.
Every component can defined its own state and share it with other components that need access to or use that state.
React allows this by passing down state data from a parent component(component that defined state) to child component(component recieving state) through whats called props short for (properties) or prop drilling.
Its this techique that allows state to be shared among components that needs it.
Lets consider this:

 import React {useState} from 'react'
  const StateInReact= () =>{
   //creates and gives initial value
   const[title, setTitle]= useState('State in React!') 
    //Not allowed!
    title= "New state value"
   // Allowed
    setTitle('new state value')
  return(
         <>
          <AnotherComp title = {title}/> //pass state as prop
         </>
       ) 
}

const AnotherComp =(props)=> {
return(<h1>{props.title}</h1>) // access state from props
}

But this way of state sharing would bring unneccessary work for other child components that have no use of the state but just to pass it along down to the next, until the one that has use for it.
Solution? React allows you also to define a global state , so that any component can access it directly and use the state whenever needed.
This is possible by defining a context(scope) through the context API, that hooks state to a provider wraping your application or main component in your app.
Thats how global state is provided and achieved in your react app.
Lets consider this:

 import React, { useState, useContext } from 'react';
import data from '../birthday/Data';

const PersonContext = React.createContext(); // has two components named provider and consumer
const ContextAPI = () => {
  const [people, setPeople] = useState(data);
  const removeItem = (id) => {
    setPeople((people) => {
      return people.filter((person) => person.id !== id);
    });
  };
  return (
    <PersonContext.Provider value={{ removeItem, people }}>
      <h2>ContextAPI</h2>
      <List />
    </PersonContext.Provider>
  );
};

const List = () => {
  const { people } = useContext(PersonContext);
  return (
    <>
      {people.map((person) => {
        return <SinglePerson key={person.id} person={person} />;
      })}
    </>
  );
};

const SinglePerson = ({ person }) => {
  const { removeItem } = useContext(PersonContext);
  return (
    <div key={person.id}>
      <h4>{person.name}</h4>
      <button type='button' onClick={() => removeItem(person.id)}>
        remove
      </button>
    </div>
  );
};

export default ContextAPI;

This way of state management is okay when your app is small and does not involve complex state logic.
But as your app scales or grow you would need to use dedicated tools for managing your state such as Redux, MobX etc
On how to use such state management tools like Redux , i will do a separate article on that. So do look out for it once it's published.
You can also check out the source code on my github were i have documented this resource.

Sycronization

Sycronization is the ability to respond or react to updates and changes in data/state across data and rendering components.
What this means is that, when your data or state updates or changes, every other component that uses or access that data ,should be able to recieve and update its data with the current state/data.
This gives the app or component ability to update UI/re- rendering with current state.
A simple example is form that uses controlled inputs.
You can also archive this with React-router data apis. Will write and show you how in my next article about react-router's super powers🥷🏽.

Summary

Every time you update state data that UI uses, you send that data to UI so it can update its UI acordingly.

One directional flow of data

Providing a single source of truth is how react state manages its state or data.
We have seen this on mutatation of state and this why.
This is also the basic principle for all state management libraries like redux and state immutabality is archied.
For a more indepth about this will be convered in redux and state management in react.

Conclusion:

Whether you building a small app or complex app , you will want to store some data, to provide a custom experience to the user(aka user experience).
And state is how you archieve just that in react, therefore knowing how state works is the right direction to put your feet in waters of React.

Hope you had a wonderful read ,and some quetion answered.

Happy coding!!🚀

React state in 2 min

Kinginthenorthcodez — Sat, 05 Nov 2022 20:46:25 +0000

Dear reader,this is going to be a 4 part series article highlighting the following concepts on state in react.
On a lighter note,did you know you just discovered a gem in the react mines 😁. Here!

What is State in React?

How State in React works?

Types of State in React

What is Lifting State Up in React?

Okay, lets get started!

What is State in React?

React Provides a dynamic data store for each component
The internal data represents the state of a react component and can be accessed using the state member variable of that react component.
Whenever the state of the component changes, the component re-renders along with its new state by calling the render() method.

Summary:

The state represents the value of dynamic properties of a React component's data at a given instance.

How to define State in React?

They are two ways to define the state in React, using the setState API and useState Hooks API respectively.
Will focus on the useState hook API for functional components
React state should not be modified directly through the state member variable and updating the state through the member variable does not re-render the component.
to define state simply import the useState hook

const [myState, setMyState] = useState({name: 'Jon'})

To access the state simply :

<p>{myState.name}</p>

To update state simply:

const handleState =() => {
    setMyState ({name: 'Jane', age: 27})
}

Summary

We can update any one of the state fields at a time instead of updating the whole object. This feature gives the developer the flexibility to easily handle the state data.

Conclusion

In react whenever the state is inferred or defined it simply means the status of the application or component at any given instance and that allows it to be aware of its environment to respond to requests and updates accordingly.

Data structure everywhere

Kinginthenorthcodez — Fri, 13 May 2022 16:57:29 +0000

Everywhere we look and everything we use has in some degree a data structure implemented. If we look close enough to observe the intricates of the world arround us , soon will start picking up parttens on how everything arround us fits in just right.

In the world of quatum mechanics and science , our world itself is a marvel . From how just they seem to be enough room for everyone and a constant time to chip in the right seasons and moments. Most renowed scientist and physicist have called this a dimenssion .

And now using real world examples to mirror how data structure is impelemented in the digital world.

Post to be continued…