dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix React error #310 by ensuring hooks are called before conditional returns

Browse Source 
- Moved useMemo calls before early returns in VideoPlayer component
- This ensures hooks are always called in the same order on every render
- Fixed violation of Rules of Hooks that caused error in production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-04 11:39:39 +07:00
parent ab7033b82e
commit 15760d6430
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/Bootcamp.tsx
View File

@@ -155,6 +155,16 @@ const VideoPlayer = ({
// Memoize video source to prevent unnecessary re-renders
const video = useMemo(getVideoSource, [lesson.id, lesson.video_host, lesson.m3u8_url, lesson.mp4_url, lesson.youtube_url, lesson.video_url, lesson.embed_code]);
// Determine video type - must be computed before conditional returns
const isYouTube = video?.type === 'youtube';
const isAdilo = video?.type === 'adilo';
const isEmbed = video?.type === 'embed';
// Memoize URL values BEFORE any conditional returns (Rules of Hooks)
const videoUrl = useMemo(() => (isYouTube ? video?.url : undefined), [isYouTube, video?.url]);
const m3u8Url = useMemo(() => (isAdilo ? video?.m3u8Url : undefined), [isAdilo, video?.m3u8Url]);
const mp4Url = useMemo(() => (isAdilo ? video?.mp4Url : undefined), [isAdilo, video?.mp4Url]);
// Show warning if no video available
if (!video) {
return (
@@ -168,7 +178,7 @@ const VideoPlayer = ({
}
// Render based on video type
if (video.type === 'embed') {
if (isEmbed) {
return (
<div className="mb-6">
<div className="aspect-video bg-muted rounded-none overflow-hidden border-2 border-border">
@@ -187,15 +197,6 @@ const VideoPlayer = ({
);
}
// Adilo or YouTube with chapters support
const isYouTube = video.type === 'youtube';
const isAdilo = video.type === 'adilo';
// Memoize URL values to ensure they're stable across renders
const videoUrl = useMemo(() => (isYouTube ? video.url : undefined), [isYouTube, video.url]);
const m3u8Url = useMemo(() => (isAdilo ? video.m3u8Url : undefined), [isAdilo, video.m3u8Url]);
const mp4Url = useMemo(() => (isAdilo ? video.mp4Url : undefined), [isAdilo, video.mp4Url]);
return (
<>
{/* Video Player - Full Width */}