如何在上下文内的 useEffect 钩子中传递依赖项

Question

I have an useEffect hook inside Context. Also, i have two functional component, from one of them, i am calling context like const context = useContext(ApiContext); but at the same time, from the same component, need to pass dependency of useEffect as well so that useEffect code should execute only if the dependency changes, here for example.."Name" and "Range". Below is my context code

import React, { useState, useEffect } from 'react';

export const ApiContext = React.createContext();

const Context = props => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    console.log('rendered');
    setArticles(['Article One', 'Article Two', '...ect']);
  }, [props.Name, props.Range]);

  return <ApiContext.Provider value={articles}>{props.children}</ApiContext.Provider>;
};

export default Context;

Here is codeSandBox exmaple: https://codesandbox.io/s/route-rerender-api-fix-q9tu2

How to passs props.Name and props.Range from from my functional component?

Answer 1

You can do like this to spread all the props from parent - class component

<Context {...this.props} >....your components...</Context>, 

or like for specific

   <Context name='test'>... your components ....</Context>

and you can access like in the context

useEffect(() => {
    console.log("rendered with props", props.name);
    setArticles(['Article One', 'Article Two', '...ect']);
  }, [props.name]);

working codesandbox - check the console

passing input from child component - codesandbox