In this article, i show you how to access data by using two different methods which are context api and reducer. the advantage of these methods are that we can access data on any layer.

 before coming these methods; props are used for access data in hierarchy, which is inefficient method. e.g if there are three layer of hierarchy which is app.js, parent.js and child.js. and you want to access data from app.js to child.js. but by using props it is required to pass data from app.js to parent.js and then parent.js to child.js which inefficient method especially when layer of hierarchy is increased, and another disadvantage is to even pass data to those layer at which data is not required.

Write below code in App.js file

import React, {useState} from 'react';
import './App.css';
import Parent from './Parent';
import countercontext from './CounterContext.js';
function App() {

  let countState = useState(0);
  return (
    <countercontext.Provider value = {countState}>
      <Parent/>
    </countercontext.Provider>
  );
}

export default App;

create Parent.js file and write below code in it.

import React from 'react';
import Child from './Child.js';
import Child2 from './Child2.js';
const Parent = () => {
    return (
        <div>
            <Child/>
            <Child2/>
        </div>
    );
}

export default Parent;

then create Child and Child2 js files and write below code in it.

child js code:

import React, { useContext } from 'react';
import countercontext from './CounterContext.js';
const Child = () => {
    let countervalue = useContext(countercontext);
    return(
        <div>
            <h2>***Counter Context API***</h2>
            <h2>Counter value is: {countervalue[0]}</h2>
            <button onClick={()=>{countervalue[1](++countervalue[0])}}>Increment Counter</button>
            <button onClick={()=>{countervalue[1](countervalue[0]>0?--countervalue[0]:countervalue[0])}}>Decrement Counter</button>
        </div>
    );
}

export default Child;

child2 js code is: 

import React, { useReducer } from 'react';
import counterReducer from './CounterReducer.js';
const Child2 = () => {
    let [State, Dispatch] = useReducer(counterReducer, 10);
    return(
        <div>
            <hr/>
            <h2>***Use Reducer Hook of React***</h2>
            <h2>Value of Reducer is: {State}</h2>
            <button onClick={()=>{Dispatch('INCREMENT')}}>Increment Reducer</button>
            <button onClick={()=>{Dispatch( State > 0 ? 'DECREMENT' : 'Default')}}>Decrement Reducer</button>
        </div>
    )
}

export default Child2;

then create CounterContext.js file and write below code in it.

import React, { createContext } from 'react';

const countercontext = createContext(100);

export default countercontext;

next create CounterReducer.js and write below code in it.

import React from 'react';

const counterReducer =  (state, action) => {
    switch(action){
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        case 'Default':
            return state;
    }
}

export default counterReducer;