Closed chentsulin closed 3 years ago
After these changes, we can wrap functions with useCallback to avoid unnecessary re-render
useCallback
import React, { useCallback } from 'react'; import { render } from 'react-dom'; import WordCloud from 'react-d3-cloud'; import { scaleOrdinal } from 'd3-scale'; import { schemeCategory10 } from 'd3-scale-chromatic'; function App() { const data = [ { text: 'Hey', value: 1000 }, { text: 'lol', value: 200 }, { text: 'first impression', value: 800 }, { text: 'very cool', value: 1000000 }, { text: 'duck', value: 10 }, ]; const fontSize = useCallback((word) => Math.log2(word.value) * 5, []); const rotate = useCallback((word) => word.value % 360, []); const fill = useCallback((d, i) => scaleOrdinal(schemeCategory10)(i), []); const onWordClick = useCallback((word) => { console.log(`onWordClick: ${word}`); }, []); const onWordMouseOver = useCallback((word) => { console.log(`onWordMouseOver: ${word}`); }, []); const onWordMouseOut = useCallback((word) => { console.log(`onWordMouseOut: ${word}`); }, []); return ( <WordCloud data={data} width={500} height={500} font="Times" fontStyle="italic" fontWeight="bold" fontSize={fontSize} spiral="rectangular" rotate={rotate} padding={5} random={Math.random} fill={fill} onWordClick={onWordClick} onWordMouseOver={onWordMouseOver} onWordMouseOut={onWordMouseOut} /> ); );
97
After these changes, we can wrap functions with
useCallback
to avoid unnecessary re-render