Suppose there's a table that needs to keep some state, for example, knowing the last element that was hovered over. To do so, we'd need a onMouseOver event on a child element like this:

<tr onm ouseOver={handleMouseOver}></tr>

and then the component containing the table would re-render all the children after setState({lastHovered: e.target}) (something along those lines)

If the goal of hover is to make changes to just one row (let's say show/hide something without using CSS) is there a way to keep this state at a higher level than the row and only render changes in the <tr>s that are affected by the hover?

As an example, let's say there's a delay on hovering in or out of the table. When hovering in, children should show a tooltip, but only if hovered directly over. The table/parent need to maintain some state to keep track of this but is there a way to not have to re-render the entire list of children?

CodePudding user response：

For Functional Components

Wrap all the tr elements inside a React.memo (read) to only listen for changes to its internal props. Also, place the onMouseOver event on the table itself and not every child immediate element, then check which child element is in "focus" (i.e., event.target).

Inside table component:

const [lastHovered, setLastHovered] = useState(null);
const [trProps, setTrProps] = useState(null);

return (
  <table onm ouseOver={event => setLastHovered(event.target) /* Also check if 'TR' type */ }> 
    <TableRows someData={trProps} />
  </table>
)

Table rows component:

const TableRows = React.memo( ({someData}) => /* Triggers update only if 'someData' changes */
      <> { someData.map( data => <tr>{data}</tr> ) } </>
    )

Note: The above code isn't tested; written to demonstrate a possible solution.

For Class Components

If you're using class components, then create a custom TableRow element and add shouldComponentUpdate() (read) to control rerenders, or use PureComponents (read) instead.