usecontexthook

context api:prop drilling

redux:

global state/logic code ui code both in diff 

predictable concept

1..

 import React, { useState } from 'react'

import HookCustom3 from './HookCustom3';

export default function HookCustom() {

  const [count,setCount]=useState(0);

    return (

    <div>

        {count}

        <button onClick={()=>

setCount(prevcount=>prevcount+1)}>increment

</button>

        <HookCustom3 value={count}/>

        

    </div>

  )

}

2...

import React from 'react'

import HookCustom1 from './HookCustom1'

export default function HookCustom3({value}) {

  return (

    <div>HookCustom{value}

    <HookCustom1 value={value}/>

    </div>

  )

}

3...

import React from 'react'

export default function HookCustom1({value}) {

  return (

    <div>HookCustom{value}</div>

  )

}

//...............................provlem solve.....................................

make UserContext.js file:--

import {createContext} from 'react';

export const UserContext = createContext({});

in the app.js file:

import HookCustom from 

'./Components/Hooks/HookCustom';

import {UserContext} 

from './Components/Hooks/UserContext'

function App() {

  const [count,setCount]=useState(0);

  return (

    < >

     <UserContext.Provider value={count}>

    <HookCustom/>

    </UserContext.Provider>

    {count}

    <button onClick={()=>setCount

(prevcount=>prevcount+1)}>click</button>

}..

HookCustom.js:--

import React from 'react'

import HookCustom1 from './HookCustom1'

export default function HookCustom() {

  return (

    <div>HookCustom

        <HookCustom1/>

    </div>

  )

}

HookCustom1.js

import React from 'react'

import HookCustom3 from './HookCustom3'

export default function HookCustom1() {

  return (

    <div>HookCustom1

        <HookCustom3/>

    </div>

  )

}

HookCustom3.js:

import React,{useContext} from 'react'

import { UserContext } from './UserContext'

export default function HookCustom3() {

    const user = useContext(UserContext);

    return (

    <div>HookCustom{user}</div>

  )

}