React context api 仅呈现使用已更改值的组件

Question

I was messing with the context api and I was passing a couple of values down through the tree, lets call them val and val2. And I have three different components let just call them First, Second, and Third. Second and Third will be a consumer of the Context Api in React. Second will get the first val and third will get the second val2. Now if I have a function that changes the first val that the second component uses I am getting a render of the Third component that uses the val2 value. With redux I don't get this unwanted rendering. I was wondering if there was a way to bypass this rendering in react or if redux is still the way to go to get this type of performance. Here is a little markup of what I am talking about:

The state and global context are held in a wrapper wrapping the first component which wraps the second and third component.

Here is the second component:

import React, { useContext, useState } from 'react';
import {GlobalContext} from '../context/GlobalState'

const Second = () => {
  console.log("Second Rendered");
  const context = useContext(GlobalContext);
  const [inputVal, updateVal] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    context.updateVal(inputVal)
  }
  return (
    <>
      <p>{context.val}</p>
      <form onSubmit={handleSubmit}>
        <input onChange={(e) => updateVal(e.target.value)} name="val" value={inputVal} />
        <button type="submit">Update Val</button>
      </form>
    </>
  )
}

export default Second;

And Here is the third component:

import React, { useContext} from 'react';
import {GlobalContext} from '../context/GlobalState';

const Third = () => {
  console.log("Third Rendered")
  const context = useContext(GlobalContext);

  return (
    <p>{context.val2}</p>
  )
}

export default Third;

So when I update the value of the second component the third component renders even though the values are not shared. I understand why its happening I just was curious if there was a way to stop this from happening. Like I said I don't get this behavior from redux so I guess I'm wondering if I should just stick with redux for state management.

Answer 1

I understand that you need to avoid re-renders in your <Third /> component. In this case, you can use React.memo with functional components, it is the same functionality as pure components but without class.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

Answer 2

So, you can't use memo on the Component Third (because it's not the props that are being changed but the Context) but you can split Third into two pieces - one that uses Context and one that receives the necessary value from a prop - and memoize that inner one. The outer Component is going to rerender but it's just a wrapper so that's not a big deal.

For instance:

import React, { useContext} from 'react';
import {GlobalContext} from '../context/GlobalState';

const Third = () => {
  console.log("Third Rendered")
  const context = useContext(GlobalContext);

  return (
    <ThirdBody val={context.val2} />
  )
}

const ThirdBody = React.memo(({ val }) => <p>{val}</p>)

export default Third;