{"ScriptPreparationCode":"function ComponentWithInlineFunctionAndNonMemoizedButton() {\r\n const [state, setState] = React.useState(0);\r\n const clickMe = evt =\u003E {\r\n evt.preventDefault();\r\n setState(function(existingState){\r\n // Trigger re-render each time\r\n return existingState \u002B 1;\r\n });\r\n }\r\n return React.createElement(NonMemoizedButton, {\r\n onClick: clickMe\r\n }, \u0027Click me!\u0027);\r\n}\r\n\r\nfunction ComponentWithInlineFunctionAndMemoizedButton() {\r\n const [state, setState] = React.useState(0);\r\n const clickMe = evt =\u003E {\r\n evt.preventDefault();\r\n setState(function(existingState){\r\n // Trigger re-render each time\r\n return existingState \u002B 1;\r\n });\r\n }\r\n return React.createElement(MemoizedButton, {\r\n onClick: clickMe\r\n }, \u0027Click me!\u0027);\r\n}\r\n\r\nfunction ComponentWithUseCallbackAndNonMemoizedButton() {\r\n const [state, setState] = React.useState(0);\r\n const clickMe = React.useCallback(evt =\u003E {\r\n evt.preventDefault();\r\n setState(function(existingState){\r\n // Trigger re-render each time\r\n return existingState \u002B 1;\r\n });\r\n }, []);\r\n return React.createElement(NonMemoizedButton, {\r\n onClick: clickMe\r\n }, \u0027Click me!\u0027);\r\n}\r\n\r\nfunction ComponentWithUseCallbackAndMemoizedButton() {\r\n const [state, setState] = React.useState(0);\r\n const clickMe = React.useCallback(evt =\u003E {\r\n evt.preventDefault();\r\n setState(function(existingState){\r\n // Trigger re-render each time\r\n return existingState \u002B 1;\r\n });\r\n }, []);\r\n return React.createElement(MemoizedButton, {\r\n onClick: clickMe\r\n }, \u0027Click me!\u0027);\r\n}\r\n\r\nfunction NonMemoizedButton (props) {\r\n const { a, b, c, d, e, f, g, h, i, j, k, l, m, n, onClick } = props;\r\n const classes = [\u0022some\u0022, \u0022joined\u0022, \u0022words\u0022, \u0022in\u0022, \u0022an\u0022, \u0022array\u0022]\r\n return React.createElement(\u0027button\u0027, {\r\n className: classes.join(\u0022 \u0022),\r\n onClick: onClick\r\n }, \u0027Click me!\u0027);\r\n}\r\n\r\nconst MemoizedButton = React.memo(function MemoizedWrapperComponent (props) {\r\n const { a, b, c, d, e, f, g, h, i, j, k, l, m, n, onClick } = props;\r\n const classes = [\u0022some\u0022, \u0022joined\u0022, \u0022words\u0022, \u0022in\u0022, \u0022an\u0022, \u0022array\u0022]\r\n return React.createElement(\u0027button\u0027, {\r\n className: classes.join(\u0022 \u0022),\r\n onClick: onClick\r\n }, \u0027Click me!\u0027);\r\n});\r\n\r\nwindow.rootElem = document.getElementById(\u0027root\u0027);","TestCases":[{"Name":"Inline \u002B NonMemoized","Code":"ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndNonMemoizedButton), window.rootElem)","IsDeferred":false},{"Name":"Inline \u002B Memoized","Code":"ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndMemoizedButton), window.rootElem)","IsDeferred":false},{"Name":"useCallback \u002B NonMemoized","Code":"ReactDOM.render(React.createElement(ComponentWithUseCallbackAndNonMemoizedButton), window.rootElem)","IsDeferred":false},{"Name":"useCallback \u002B Memoized","Code":"ReactDOM.render(React.createElement(ComponentWithUseCallbackAndMemoizedButton), window.rootElem)","IsDeferred":false}]}