<p dir="auto">I would like to humbly request a componentDidReceiveProps hook, often times I would like to do something on both componentWillMount and componentWillReceiveProps, but because <code class="notranslate">this.props</code> hasn't been set yet I am forced to pass props around instead of reading directly from <code class="notranslate">this.props</code>.</p>
<h2 dir="auto">Before New Hook</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="componentWillMount() {
  this.setup(this.props.id);
}

componentWillReceiveProps(next) {
  this.setup(next.id);
}

setup(id) {
  UserActions.load(id);
}"><pre class="notranslate"><span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">componentWillReceiveProps</span><span class="pl-kos">(</span><span class="pl-s1">next</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-s1">next</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-v">UserActions</span><span class="pl-kos">.</span><span class="pl-en">load</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">After New Hook</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="componentWillMount() {
  this.setup();
}

componentDidReceiveProps() {
  this.setup();
}

setup() {
  UserActions.load(this.props.id);
}"><pre class="notranslate"><span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">componentDidReceiveProps</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-v">UserActions</span><span class="pl-kos">.</span><span class="pl-en">load</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">In this simple example it may seem like a small thing, but often times the passing of props runs deep and instead of conveniently referencing this.props one is forced to plumb the props throughout the component.</p>
<p dir="auto">Please consider adding <code class="notranslate">componentDidReceiveProps</code> as a hook to leverage the same code that is leveraged in componentWillMount without forcing both to plumb props throughout the component.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Feature</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
useContext triggers update if the whole passed store changed</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
add keys argument to trigger update only if specified keys in passed store changed</p>
<p dir="auto">It would be useful to improve application speed.</p>
<p dir="auto">F.e.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function MyComponent() {
  // example context value
  // I want to ignore age changes (who does't hehe)
  // {
  //   name: 'Max',
  //   age: 35
  // }
  // dep's-like style
  const {name} = useContext(MyContext, 'name')
  // or
  // comparator style 
  const {name} = useContext(MyContext, (current, old) =&gt; current.name !== old.name)
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-v">MyComponent</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-c">// example context value</span>
  <span class="pl-c">// I want to ignore age changes (who does't hehe)</span>
  <span class="pl-c">// {</span>
  <span class="pl-c">//   name: 'Max',</span>
  <span class="pl-c">//   age: 35</span>
  <span class="pl-c">// }</span>
  <span class="pl-c">// dep's-like style</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span>name<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useContext</span><span class="pl-kos">(</span><span class="pl-v">MyContext</span><span class="pl-kos">,</span> <span class="pl-s">'name'</span><span class="pl-kos">)</span>
  <span class="pl-c">// or</span>
  <span class="pl-c">// comparator style </span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span>name<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useContext</span><span class="pl-kos">(</span><span class="pl-v">MyContext</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">current</span><span class="pl-kos">,</span> <span class="pl-s1">old</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">current</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">!==</span> <span class="pl-s1">old</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>