Calculated: {calcValue()}
\r\nHi, {name}!
\r\n \r\n}\r\n\r\nexport default afcMemo(Component)\r\n```\r\n\r\n## Component structure\r\n\r\n```jsx\r\nimport { afc } from 'react-afc'\r\n\r\nfunction Component(props) {\r\n // The body of the \"constructor\".\r\n // Is called once (before the first render).\r\n // Common hooks must be wrapped or in 'useOnRender'.\r\n\r\n return () => {\r\n // Render function, as in a regular component.\r\n // Every render is called.\r\n return (\r\nCalculated: {calculate()}
\r\n )\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\n## Using regular hooks in the body of the \"constructor\"\r\n\r\n```jsx\r\nimport { afc, useOnRender } from 'react-afc'\r\nimport { commonHook } from './hooks'\r\n\r\nfunction Component() {\r\n let exampleVar = null\r\n\r\n useOnRender(() => {\r\n exampleVar = commonHook()\r\n })\r\n\r\n return () => {\r\n // OR\r\n // exampleVar = commonHook()\r\n return (\r\nVariable: {exampleVar}
\r\n )\r\n }\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\nOr use `wrapStaticHook` / `wrapDynamicHook`\r\n\r\n```jsx\r\nimport { afc, useOnRender, useForceUpdate, wrapStaticHook, wrapDynamicHook } from 'react-afc'\r\n\r\nfunction commonHook(number) {\r\n // any React common hooks\r\n}\r\n\r\n// If the result of the hook does not change\r\nconst staticHook = wrapStaticHook(commonHook)\r\n// Else\r\nconst dynamicHook = wrapDynamicHook(commonHook)\r\n\r\nfunction Component() {\r\n let number = 5\r\n\r\n const staticResult = staticHook(number)\r\n const getDynamicResult = dynamicHook(() => [number])\r\n const forceUpdate = useForceUpdate()\r\n\r\n return () => {\r\n number++\r\n\r\n return <>\r\nStatic result: {staticResult}
\r\nDynamic result: {getDynamicResult()}
\r\n \r\n \r\n }\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\n`useOnRender` is called immediately and before each render (so as not to break hooks)\r\n\r\n```jsx\r\nimport { afc, useOnRender } from 'react-afc'\r\n\r\nfunction Component(props) {\r\n console.log('Constructor start')\r\n useOnRender(() => {\r\n console.log('onRender')\r\n })\r\n console.log('After onRender')\r\n\r\n return () => (\r\nonRender
\r\n )\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\nIn this example, the console output will be:\r\n\r\n```text\r\nConstructor start\r\nonRender\r\nAfter onRender\r\n```\r\n\r\nAnd before each next render it will be output to the console\r\n\r\n```text\r\nonRender\r\n```\r\n\r\n## Compatible with non-afc components\r\n\r\nTo use the same code in regular and _afc_ components, use the methods from `react-afc/compatible`.\r\n\r\nThey have slightly less performance.\r\n\r\nWhen called in an _afc_ component, they work like normal methods for 'constructor'. When called in a regular component,\r\nthey use adapted versions that do not cause errors and do the same job as in 'constructor'.\r\n\r\n_Note:_ Use compatible methods only in reused functions.\r\nIn other cases, the fastest option will be the usual methods from `react-afc`.\r\n\r\n```jsx\r\nimport { afc, wrapDynamicHook } from 'react-afc'\r\nimport { useOnMount, useOnDestroy } from 'react-afc/compatible'\r\nimport { externalCommonHook } from './hooks'\r\n\r\nconst afcHook = wrapDynamicHook(externalCommonHook)\r\n\r\nfunction handleDocumentClick(callback) {\r\n useOnMount(() => {\r\n document.addEventListener('click', callback)\r\n })\r\n useOnDestroy(() => {\r\n document.removeEventListener('click', callback)\r\n })\r\n}\r\n\r\nconst AFCComponent = afc(props => {\r\n handleDocumentClick(() => {\r\n // any actions\r\n })\r\n afcHook(5)\r\n\r\n return () => (\r\nafc component
\r\n )\r\n})\r\n\r\nfunction CommonComponent(props) {\r\n // Will not cause errors\r\n handleDocumentClick(() => {\r\n // any actions\r\n })\r\n externalCommonHook(5)\r\n\r\n return (\r\ncommon component
\r\n )\r\n}\r\n```\r\n\r\nFor single hard calculations use `useOnceCreated`\r\n\r\n## Common errors\r\n\r\nUnpacking at the declaration will break the updating of the props: `name` and `age` will be the same every render\r\n\r\n```ts\r\nimport { afc } from 'react-afc'\r\n\r\n // Error !!!\r\nfunction Component({ name, age }) {\r\n // ...\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\nUnpacking `state`, `props` or `reduxState` directly in the constructor body will **freeze** these variables:\r\n`name`, `age` and `surname` will not change between renders.\r\n\r\n_The exclusion is the case when the received fields do not change during the life of the component_ \r\n_Unpacking in **render function** or handlers does not have such a problem_\r\n\r\n```jsx\r\nimport { afc, useReactive, useRedux } from 'react-afc'\r\n\r\nfunction Component(props) {\r\n const state = useReactive({\r\n name: 'Aleksandr',\r\n age: 20\r\n })\r\n\r\n const store = useRedux({\r\n count: s => s.count.value\r\n })\r\n\r\n const { name, age } = state // Error, freeze !!!\r\n const { count } = store\r\n const { surname } = props\r\n\r\n function onClick() {\r\n const { name, age } = state // Right, always relevant\r\n const { count } = store\r\n const { surname } = props\r\n }\r\n\r\n return () => (\r\n \r\n )\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\nIt is forbidden to use regular hooks in the constructor without the `useOnRender` wrapper.\r\n\r\nSince the \"constructor\" is called once, the call of the usual hooks in it will not be repeated in the render,\r\nwhich will cause the hooks to break and the application to crash.\r\n\r\nThe contents of `useOnRender` are called every render, which ensures that the hooks work correctly.\r\n\r\n_Note:_ Use `useOnRender` only when there is no other way.\r\n\r\n```jsx\r\nimport { useEffect as reactUseEffect } from 'react'\r\nimport { afc, useOnRender } from 'react-afc'\r\n\r\nfunction Component(props) {\r\n reactUseEffect(/*...*/) // Error !!!\r\n\r\n useOnRender(() => {\r\n reactUseEffect(/*...*/) // Right\r\n })\r\n\r\n return () => {\r\n reactUseEffect(/*...*/) // Right\r\n\r\n return (\r\ncommon hooks
\r\n )\r\n }\r\n}\r\n\r\nexport default afc(Component)\r\n```\r\n\r\n## API\r\n\r\nSee [Wiki](https://github.com/VerZsuT/react-afc/wiki)\r\n","readmeFilename":"README.md","homepage":"https://github.com/VerZsuT/react-afc#readme","repository":{"type":"git","url":"git+https://github.com/VerZsuT/react-afc.git"},"bugs":{"url":"https://github.com/VerZsuT/react-afc/issues"}}