Skip to content

Transformed a small subset of samples to functional components#1056

Draft
Copilot wants to merge 11 commits intovnextfrom
copilot/refactor-to-functional-components
Draft

Transformed a small subset of samples to functional components#1056
Copilot wants to merge 11 commits intovnextfrom
copilot/refactor-to-functional-components

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 14, 2026

Following the refactor of LinearStepperFunctional.tsx (which replaced useEffect+addEventListener with onInput on native <form> elements), the corresponding rule in the generation guide was still documenting the old pattern.

Changes — FUNCTIONAL_COMPONENT_GENERATION_GUIDE.md §15

  • Functional template: dropped the useEffect block; replaced with a useCallback handler at component scope and onInput={handleInput} on each <form> element.
  • Rules: updated to prefer React's synthetic onInput/onChange props (Ignite UI web components bubble standard DOM events through the shadow DOM, so a parent <form> catches them); kept a fallback note for cases where useEffect+addEventListener is still warranted (elements outside the React tree, non-standard event names).
// Before
useEffect(() => {
    const handleInput = () => checkActiveStepValidity(linear);
    infoForm?.addEventListener('igcInput', handleInput);
    return () => infoForm?.removeEventListener('igcInput', handleInput);
}, [linear, checkActiveStepValidity]);

// After
const handleInput = useCallback(
    () => checkActiveStepValidity(linear),
    [linear, checkActiveStepValidity]
);
<form ref={infoFormRef} onInput={handleInput}>...</form>

Copilot AI and others added 8 commits April 8, 2026 10:24
… high-frequency chart

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-react-examples/sessions/a777979d-98e9-46cf-adc5-3df39b356ec9

Co-authored-by: gedinakova <16817847+gedinakova@users.noreply.github.com>
…op redundant onChartRef callback

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-react-examples/sessions/56ffbced-7d25-4fde-8bb7-07304c135c93

Co-authored-by: gedinakova <16817847+gedinakova@users.noreply.github.com>
// useMemo creates these once – equivalent to the lazy backing-field getters in the class
const energyGlobalDemand = useMemo(() => new EnergyGlobalDemand(), []);

const renderer = useMemo(() => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This renderer is not used anywhere. Check if it's an omission or it should be deleted. @copilot

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The renderer was unused (not referenced in JSX or anywhere else in the component), so it was deleted along with the now-dead imports (ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule) and the unused useRef import. Fixed in 9e9a075.

Copilot AI and others added 2 commits April 15, 2026 07:25
Copilot AI requested a review from gedinakova April 15, 2026 07:28
@gedinakova gedinakova changed the title docs: update generation guide §15 to prefer onInput over useEffect+addEventListener Transformed a small subset of samples to functional components Apr 15, 2026
@gedinakova gedinakova requested a review from gmurray81 April 15, 2026 12:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants