title: React Native Prevent Context Dependency Rerender All Components
body: <p>I have three buttons. When I click one button, it fires Context's memo function to add an item into Context's items. I see that clicking one button re-renders all the three buttons, which is not expected. I need to re-render only the clicked button. Please advice.</p>
  <p><strong>CounterContext.js</strong></p>
  <pre><code>import { createContext } from &quot;react&quot;;
  
  export const CounterContext = createContext(null);
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { Text, StyleSheet } from &quot;react-native&quot;;
  import MyButton from &quot;./MyButton&quot;;
  import { CounterContext } from &quot;./CounterContext&quot;;
  
  function counterReducer(prevState, action) {
    switch (action.type) {
      case &quot;ADD_ITEM&quot;:
        let items = [...prevState.items, action.item];
  
        return {
          items: items,
          count: items.length
        };
      default:
        console.log(&quot;No action type&quot;);
        break;
    }
  }
  const buttons = [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;];
  
  export default function App() {
    const [counterState, counterDispatch] = React.useReducer(counterReducer, {
      items: [],
      count: 0
    });
  
    const counterContext = React.useMemo(
      () =&gt; ({
        addItem: item =&gt; {
          counterDispatch({
            type: &quot;ADD_ITEM&quot;,
            item: item
          });
        },
        items: counterState.items,
        itemsCount: counterState.items.length
      }),
      [counterState.items]
    );
  
    return (
      &lt;CounterContext.Provider value={counterContext}&gt;
        {buttons.map((button, index) =&gt; {
          return &lt;MyButton key={index} id={button} /&gt;;
        })}
        &lt;Text style={styles.counter}&gt;{counterContext.itemsCount}&lt;/Text&gt;
        &lt;Text style={styles.items}&gt;{JSON.stringify(counterContext.items)}&lt;/Text&gt;
      &lt;/CounterContext.Provider&gt;
    );
  }
  
  const styles = StyleSheet.create({
    counter: {
      margin: 10,
      fontSize: 30
    },
    items: {
      margin: 10,
      fontSize: 18
    }
  });
  </code></pre>
  <p><strong>MyButton.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { TouchableOpacity, Text, StyleSheet } from &quot;react-native&quot;;
  import { CounterContext } from &quot;./CounterContext&quot;;
  
  export default function MyButton(props) {
    const { addItem } = React.useContext(CounterContext);
  
    let time = new Date().toLocaleTimeString();
  
    console.log(time + &quot; - Rendering MyButton #&quot; + props.id + &quot; ...&quot;);
  
    return (
      &lt;TouchableOpacity
        style={styles.myButton}
        onPress={() =&gt; {
          addItem({
            name: &quot;Item #&quot; + props.id
          });
        }}
      &gt;
        &lt;Text&gt;Add&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  }
  
  const styles = StyleSheet.create({
    myButton: {
      width: 100,
      margin: 10,
      padding: 10,
      textAlign: &quot;center&quot;,
      borderWidth: 1,
      borderColor: &quot;#ccc&quot;,
      backgroundColor: &quot;#e0e0e0&quot;,
      borderRadius: 5
    }
  });
  </code></pre>
  <p>Here is the Codesandbox codes: <a href="https://codesandbox.io/s/usecontext-dependency-fpcep?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/usecontext-dependency-fpcep?file=/src/App.js</a></p>
  <p><a href="https://i.stack.imgur.com/MZ7qD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MZ7qD.png" alt="enter image description here" /></a></p>