Skip to content

Fix warnings regarding dependency arrays #491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 9, 2025
Merged

Fix warnings regarding dependency arrays #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a24653f
Fix warnings regarding dependency arrays
Mash707 Mar 20, 2025
2adb562
wrapped handle send function inside useCallback
Mash707 Mar 20, 2025
5444690
removed breaking changes
Mash707 Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 60 additions & 57 deletions ...e/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,71 +36,74 @@
return id.toString();
};

const handleSend = (input: string) => {
const date = new Date();
const newMessages: MessageProps[] = [];
messages.forEach((message) => newMessages.push(message));
newMessages.push({
avatar: userAvatar,
avatarProps: { isBordered: true },
id: generateId(),
name: 'You',
role: 'user',
content: input,
timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
});
newMessages.push({
avatar: patternflyAvatar,
id: generateId(),
name,
role: 'bot',
timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
isLoading: true
});
setMessages(newMessages);
// make announcement to assistive devices that new messages have been added
setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);

// this is for demo purposes only; in a real situation, there would be an API response we would wait for
setTimeout(() => {
const loadedMessages: MessageProps[] = [];
// we can't use structuredClone since messages contains functions, but we can't mutate
// items that are going into state or the UI won't update correctly
newMessages.forEach((message) => loadedMessages.push(message));
loadedMessages.pop();
loadedMessages.push({
const handleSend = React.useCallback(
(input: string) => {
const date = new Date();
const newMessages: MessageProps[] = [];
messages.forEach((message) => newMessages.push(message));
newMessages.push({
avatar: userAvatar,
avatarProps: { isBordered: true },
id: generateId(),
role: 'bot',
content: `API response from ${name} goes here`,
name,
name: 'You',
role: 'user',
content: input,
timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
});
newMessages.push({
avatar: patternflyAvatar,
isLoading: false,
actions: {
// eslint-disable-next-line no-console
positive: { onClick: () => console.log('Good response') },
// eslint-disable-next-line no-console
negative: { onClick: () => console.log('Bad response') },
// eslint-disable-next-line no-console
copy: { onClick: () => console.log('Copy') },
// eslint-disable-next-line no-console
share: { onClick: () => console.log('Share') },
// eslint-disable-next-line no-console
listen: { onClick: () => console.log('Listen') }
},
timestamp: date.toLocaleString()
id: generateId(),
name,
role: 'bot',
timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
isLoading: true
});
setMessages(loadedMessages);
// make announcement to assistive devices that new message has loaded
setAnnouncement(`Message from ${name}: API response goes here`);
setIsSendButtonDisabled(false);
}, 5000);
};
setMessages(newMessages);
// make announcement to assistive devices that new messages have been added
setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);

// this is for demo purposes only; in a real situation, there would be an API response we would wait for
setTimeout(() => {
const loadedMessages: MessageProps[] = [];
// we can't use structuredClone since messages contains functions, but we can't mutate
// items that are going into state or the UI won't update correctly
newMessages.forEach((message) => loadedMessages.push(message));
loadedMessages.pop();
loadedMessages.push({
id: generateId(),
role: 'bot',
content: `API response from ${name} goes here`,
name,
avatar: patternflyAvatar,
isLoading: false,
actions: {
// eslint-disable-next-line no-console
positive: { onClick: () => console.log('Good response') },
// eslint-disable-next-line no-console
negative: { onClick: () => console.log('Bad response') },
// eslint-disable-next-line no-console
copy: { onClick: () => console.log('Copy') },
// eslint-disable-next-line no-console
share: { onClick: () => console.log('Share') },
// eslint-disable-next-line no-console
listen: { onClick: () => console.log('Listen') }
},
timestamp: date.toLocaleString()
});
setMessages(loadedMessages);
// make announcement to assistive devices that new message has loaded
setAnnouncement(`Message from ${name}: API response goes here`);
setIsSendButtonDisabled(false);
}, 5000);
},
[messages, name, setIsSendButtonDisabled]
);

React.useEffect(() => {
if (input) {
handleSend(input);
}
}, [hasNewInput]);
}, [hasNewInput, input]);

Check warning on line 106 in packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

React Hook React.useEffect has a missing dependency: 'handleSend'. Either include it or remove the dependency array

// Auto-scrolls to the latest message
React.useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/module/src/MessageBar/MicrophoneButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =

setSpeechRecognition(recognition);
}
}, [onSpeechRecognition]);
}, [onSpeechRecognition, language, onIsListeningChange]);

if (!speechRecognition) {
return null;
Expand Down
10 changes: 5 additions & 5 deletions packages/module/src/MessageBox/MessageBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,29 +46,29 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
setAtTop(scrollTop === 0);
setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
}
}, []);
}, [messageBoxRef]);

const checkOverflow = React.useCallback(() => {
const element = messageBoxRef.current;
if (element) {
const { scrollHeight, clientHeight } = element;
setIsOverflowing(scrollHeight >= clientHeight);
}
}, []);
}, [messageBoxRef]);

const scrollToTop = React.useCallback(() => {
const element = messageBoxRef.current;
if (element) {
element.scrollTo({ top: 0, behavior: 'smooth' });
}
}, []);
}, [messageBoxRef]);

const scrollToBottom = React.useCallback(() => {
const element = messageBoxRef.current;
if (element) {
element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
}
}, []);
}, [messageBoxRef]);

// Detect scroll position
React.useEffect(() => {
Expand All @@ -85,7 +85,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
element.removeEventListener('scroll', handleScroll);
};
}
}, [checkOverflow, handleScroll]);
}, [checkOverflow, handleScroll, messageBoxRef]);

return (
<>
Expand Down
Loading