Frontend with Syket
Frontend with Syket
  • 84
  • 84 870
React Compound Components | React Interview Questions
#react #designpatterns #reactinterview
Hi, I'm Syket Bhattachergee, and in this video, we'll explore compound components in React, a powerful design pattern every React developer should know. Compound components allow you to break down a larger component into smaller, reusable sub-components that work seamlessly together. By using React's context API, you can easily share data between these components, creating modular, flexible, and reusable components across your entire app. Stay tuned as we dive into how compound components can boost your React development workflow and make your code more maintainable and scalable.
Follow me on LinkedIn: www.linkedin.com/in/syketb/
React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html
React Compound Components | React Interview Questions
The Real Difference Between Functional and Class Components in React
The Surprising Truth About Compound Components Nobody Tells You
Compound Components in React Showdown Functional vs Class
You Won't Believe the Power of Compound Components in React
Experts Agree Compound Components Are the Future of React Development
I Spent 100 Hours Mastering Compound Components in React and Here's What I Learned
The Real Difference Between Functional and Compound Components for React Developers
5 Compound Component Hacks to Boost Your React App Performance Overnight
react tutorial,react crash course,react developer,learn react,react hook,react hooks,react hooks tutorial,programming tutorial,react hooks explained,computer science,tutorial for beginners,react component,learn programming,web development,frontend development,coding for beginners,simple code,easy programming,react,react native,react design patterns,akshay saini javascript,akshay saini react interview,akshay saini react,react tutorial for beginners
Переглядів: 1 623

Відео

React Virtualized List | Efficiently Render 100,000 Rows in React
Переглядів 69414 днів тому
#reactjs #virtualization #frontenddevelopment Hi there, I am Syket Bhattachergee from Frontend with syket, Today we will experiment with Reactjs and see how we can make React capable of rendering 100 thousand rows at the same time using virtualization. Code: codesandbox.io/p/sandbox/frontend-with-syket-virtualized-list-8yl8c6 Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview...
Master Socket.io and React - Build Full Stack Chat App with React
Переглядів 10721 день тому
#react #socketio #chatapp #express Learn Socket.io and React in 1 Hour. Learn How To Make a Real-time Full Stack chat app using React JS, Socket.io, Express, and Chakra UI. Create your own chat application step-by-step tutorial 2024. Unlock the secrets of mastering Socket.io and React with this comprehensive guide to building a real-time chat app. Learn expert techniques, essential tools, and t...
TanStack Table (React Table) Crash Course in 40 mins - Beginners Tutorial
Переглядів 1,6 тис.Місяць тому
#reacttable #tanstacktable #tanstack Master TanStack Table in 40 mins. A comprehensive tutorial on TanStack React Table, the ultimate solution for creating powerful and interactive data tables in your React applications! In this in-depth video, we will take you through all the essential concepts and features of TanStack React Table, empowering you to effortlessly manage and visualize data like ...
I Got Remote Developer Job Using LinkedIn | Tips for Job Seekers!
Переглядів 3142 місяці тому
#developerjobs #LinkedInTips #TechCareers #JobSearch2024 #CodingCareers Discover the insider strategies I used to secure a developer job through LinkedIn in 2024. This video covers profile optimization, networking techniques, and interview preparation tips that helped me stand out in a competitive job market. Whether you're a coding bootcamp graduate or an experienced programmer looking for a c...
React Stepper | Multistep Form | React Interview Questions | Machine Coding Round
Переглядів 3122 місяці тому
#react #reactinterview Let's create a react stepper form. Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html React Stepper | Multistep Form | React Interview Questions | Machine Coding Round MIND-BLOWING React Interview Questions EXPOSED! The SHOCKING Truth About Machine Coding Round Exposed The React Stepper SECRET to Acing M...
Top 5 React Concepts Explained in 10 Minutes
Переглядів 792 місяці тому
#reactjs #reactjsforbeginners Learn the most important concepts of React JS in a simple and easy manner. Top 5 React Concepts Explained in 10 Minutes Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html This video context is similar to this title: React Tutorial for Beginners React JS Explained In 10 Minutes React Crash Course 2...
5 useState & useEffect Mistakes Mid React Developers Still Make in 2024
Переглядів 4342 місяці тому
5 common mistakes React developers still make with useState and useEffect in 2024. Learn best practices to avoid these errors, improve your React code, and level up from junior to senior developer. Perfect for those starting with React or looking to refine their skills. React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html Follow me on LinkedIn: www.linkedin.com/in/syketb/ Join o...
React JS Infinite Scroll | React Interview Questions | Machine Coding Round
Переглядів 1,1 тис.2 місяці тому
#reactjs #scroll #beginners Welcome! In this video, we'll show you how to add infinite scroll with React JS. Infinite scroll is a mechanism that dynamically loads data as needed, ensuring optimal performance by avoiding critical issues. This feature is especially common in social media applications, but it can be intimidating to set up. We'll break down the process, making it clear that setting...
React Video Call App | React Beginner Projects & Portfolio | ZEGOCLOUD
Переглядів 4742 місяці тому
#zegocloud #videocall #webrtc #sdk #api Get 10000 free mins with UIKits: bit.ly/4ff8TAF Learn more about ZEGOCLOUD: bit.ly/4cUERjU How to build a video call App: bit.ly/4ft0ARY ZEGOCLOUD video call SDK &API allows you to easily build live video chat apps within minutes. Hey Everyone, we will build our own one-on-one video calling application using React and Zegocloud in this video. Connect with...
React Toast | React Interview Questions | Machine Coding Round | Frontend
Переглядів 7713 місяці тому
#reactjs #javascript #notification #toast #toastify In this tutorial, we'll show you how to create a Toast component in React-a common interview question. Follow our step-by-step instructions to implement a fully functional Toast component. Plus, gain valuable tips and tricks to tackle React JS and JavaScript questions in frontend coding interviews. Whether you're a beginner or looking to refin...
React OTP Input | Machine Coding Round | React JS Interview Questions | Frontend
Переглядів 2,3 тис.3 місяці тому
#reactjs #reacthooks #coding #javascript #otplogin #otp #login Are you preparing for a frontend react machine coding interview? Look no further! In this video, we'll guide you through creating an OTP input in React, one of the most frequently asked interview questions. Learn how to implement an OTP login feature with step-by-step instructions and gain valuable tips and tricks to tackle your Rea...
React Pagination | React Interview Questions | Machine Coding Round
Переглядів 1,1 тис.3 місяці тому
#react #JavascriptInterview #javascript Hey everyone, In this video I have shared a React Pagination Component machine coding interview that was asked to one of my friends recently. Source Code: github.com/syket-git/react-pagination Connect with me 1:1 on Discord: discord.gg/2H7NkZbN Follow me on Linkedin: www.linkedin.com/in/syketb/ react interview questions,frontend interview questions,front ...
Are You Making This Common SOLID Design Principles Mistake in React Interviews?
Переглядів 4483 місяці тому
Are You Making This Common SOLID Design Principles Mistake in React Interviews?
React JS Machine Coding ( Timer App ) - Frontend Machine Coding Interview Questions
Переглядів 9073 місяці тому
React JS Machine Coding ( Timer App ) - Frontend Machine Coding Interview Questions
You are DONE with CODE... GitHub Copilot X with GPT4
Переглядів 129Рік тому
You are DONE with CODE... GitHub Copilot X with GPT4
How I made a Game in just 10 minutes 😱 with ChatGPT and JavaScript
Переглядів 80Рік тому
How I made a Game in just 10 minutes 😱 with ChatGPT and JavaScript
useState vs useReducer in React JS | useState or useReducer | React Hooks Tutorial #react
Переглядів 191Рік тому
useState vs useReducer in React JS | useState or useReducer | React Hooks Tutorial #react
5 JavaScript Coding Hacks to Increase Code Quality
Переглядів 66Рік тому
5 JavaScript Coding Hacks to Increase Code Quality
TOP 5 CSS Interview Questions in 2023 || CSS Interview Questions
Переглядів 232Рік тому
TOP 5 CSS Interview Questions in 2023 || CSS Interview Questions
Learn React Props in 5 Minutes | React JS Props
Переглядів 229Рік тому
Learn React Props in 5 Minutes | React JS Props
Expert Next JS by Building Real Projects with Tailwind CSS #Part-10
Переглядів 66Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-10
Expert Next JS by Building Real Projects with Tailwind CSS #Part-9
Переглядів 70Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-9
Expert Next JS by Building Real Projects with Tailwind CSS #Part-8
Переглядів 77Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-8
Expert Next JS by Building Real Projects with Tailwind CSS #Part-7
Переглядів 59Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-7
Expert Next JS by Building Real Projects with Tailwind CSS #Part-6
Переглядів 74Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-6
Expert Next JS by Building Real Projects with Tailwind CSS #Part-5
Переглядів 97Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-5
Expert Next JS by Building Real Projects with Tailwind CSS #Part-4
Переглядів 81Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-4
Expert Next JS by Building Real Projects with Tailwind CSS #Part-3
Переглядів 111Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-3
Expert Next JS by Building Real Projects with Tailwind CSS #Part-2
Переглядів 137Рік тому
Expert Next JS by Building Real Projects with Tailwind CSS #Part-2

КОМЕНТАРІ

  • @mominanadeem7611
    @mominanadeem7611 3 дні тому

    i think you didnt use pagination correctly, choosing 5 and its displaying 7 rows

  • @bloodylupin
    @bloodylupin 3 дні тому

    dude learn TS please

  • @sulaymonovdiyorbek2373
    @sulaymonovdiyorbek2373 5 днів тому

    Assalomu alaykum. Bro items per page does not work in your react table project

  • @ravisankarp61
    @ravisankarp61 8 днів тому

    where can I find this code ? any github url ? thanks for this video.

    • @syketb
      @syketb 8 днів тому

      Here it is: codesandbox.io/p/sandbox/frontend-with-syket-virtualized-list-8yl8c6

  • @codedestiny6955
    @codedestiny6955 11 днів тому

    It's not easy to consume also, need to import dropdown, dropdown list and other components.

    • @syketb
      @syketb 11 днів тому

      I might have misunderstood your question, but here’s my thought: With the freedom we now have, we have complete control over the child component. This allows us to make any customizations we need. If I understood your question correctly, this should address it.

    • @codedestiny6955
      @codedestiny6955 11 днів тому

      @@syketb I just wanted to say that for developers wanting to use the dropdown component, it's not easy they need to import several child components also, which makes the process little complicated.

  • @devlopersessential4349
    @devlopersessential4349 12 днів тому

    good work sir🙏🙏🙏🙏

    • @syketb
      @syketb 12 днів тому

      Thank you <3

  • @syketb
    @syketb 14 днів тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @everbliss7955
    @everbliss7955 15 днів тому

    This triggered my OCD!😂 Can you just deal with the error messages first😢

    • @syketb
      @syketb 15 днів тому

      Error messages, what did you meant? Could you please elaborate your question?

    • @everbliss7955
      @everbliss7955 14 днів тому

      @@syketb The output on the browser was complaining that useRef was undeclared because you had not imported it. But you ignored that error for like 8-10 minutes. which was torture for some people like me. I know its not a big deal but if you have OCD it is a big deal. Anyway, I survived the torture and finished the video. So, thanks for the tutorial.

    • @syketb
      @syketb 14 днів тому

      I'm really sorry about that. I'll definitely keep it in mind for my next tutorial. Sometimes, I focus too much on certain topics to explain them clearly, but I'll make sure to avoid that in the future. Thanks for your feedback!

  • @mohammedowais8768
    @mohammedowais8768 15 днів тому

    Start from 8:00

  • @bloodylupin
    @bloodylupin 15 днів тому

    why didn't you use react window? it takes literally 3 minutes.

    • @syketb
      @syketb 15 днів тому

      Bro, I liked your suggestion! The goal is, if your lead doesn’t support using third-party libraries, or if interviewers ask you to implement a React virtualized list that can handle thousands of items, this was my main goal-to solve that issue.

    • @chandrashekark5382
      @chandrashekark5382 15 годин тому

      @@syketbexactly I was asked a interview question as to how to convince teammates not to use external libraries

    • @syketb
      @syketb 15 годин тому

      @@chandrashekark5382 Exactly, in large, secure applications, the engineering team often avoids adding third-party npm libraries due to security concerns or potential performance issues.

  • @World_information5568
    @World_information5568 16 днів тому

    ❤❤❤❤❤❤

    • @syketb
      @syketb 16 днів тому

      Thanks for your support

  • @syketb
    @syketb 16 днів тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @hellobear.
    @hellobear. 17 днів тому

    extention name pls

    • @syketb
      @syketb 17 днів тому

      Which one, you are looking for?

    • @hellobear.
      @hellobear. 17 днів тому

      @@syketb The font has been changed

    • @syketb
      @syketb 17 днів тому

      @@hellobear. I am using "Dank Mono" font

    • @hellobear.
      @hellobear. 17 днів тому

      @@syketb thanks

  • @YasinAghazyarati
    @YasinAghazyarati 24 дні тому

    The pagination part didn't work for me. I even took your code from github but it didn't work. (For example, when I choose number 5, the number of pages changes, but it shows all the rows on the page)

    • @syketb
      @syketb 24 дні тому

      Hey I would love to debug your code, please share the link of your repo.

    • @YasinAghazyarati
      @YasinAghazyarati 24 дні тому

      ​@@syketb Thanks for following up. ❤ Fortunately, my problem was solved

    • @syketb
      @syketb 24 дні тому

      @@YasinAghazyarati Amazing, good to hear

  • @YasinAghazyarati
    @YasinAghazyarati 25 днів тому

    The best TanStack Table course that I find. and a question: what's your theme and font name in VScode?

    • @syketb
      @syketb 25 днів тому

      Hey Yasin First of all thanks man, I love to hear that from you. Theme: Dark Magic Theme Font: Dank Mono

    • @YasinAghazyarati
      @YasinAghazyarati 25 днів тому

      @@syketb good luck bro

  • @syketb
    @syketb 26 днів тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @effenrilagung2825
    @effenrilagung2825 Місяць тому

    thanks i found a good channel to learn the basic concept of react table

    • @syketb
      @syketb Місяць тому

      Great to hear!

  • @balendrasinghparihar8849
    @balendrasinghparihar8849 Місяць тому

    bhai need your help

    • @syketb
      @syketb Місяць тому

      Yes please tell me, how can i help you

  • @traezeeofor
    @traezeeofor Місяць тому

    Thanks for this, I used Tanstack Table last month with ShadCN but i think i need a refresher. Especially as I'm not using shadCN in my current project. This tutorial is apt! Thanks!

    • @syketb
      @syketb Місяць тому

      Glad it was helpful! Thanks

  • @YuvrajSingh-t7t
    @YuvrajSingh-t7t Місяць тому

    Bro code link?

    • @syketb
      @syketb Місяць тому

      github.com/syket-git/react-table

  • @jawadrashid1000
    @jawadrashid1000 Місяць тому

    You are great bro

    • @syketb
      @syketb Місяць тому

      <3

    • @jawadrashid1000
      @jawadrashid1000 Місяць тому

      @@syketb Just bro can you tell me how to add animation in it please make a video on it and accessibility also 👍🏻

    • @syketb
      @syketb Місяць тому

      @@jawadrashid1000 Bro its straight forward you can use tailwind animation or just plain CSS.

    • @jawadrashid1000
      @jawadrashid1000 Місяць тому

      @@syketb ok thanks 👍🏻

  • @muhammadabduhsiregar9190
    @muhammadabduhsiregar9190 Місяць тому

    can use tanstack load newest data from API and running in background?

    • @syketb
      @syketb Місяць тому

      Yes definitely we could, see the data I am getting from the JSON file, it's the same as you can get it from API calls.

    • @muhammadabduhsiregar9190
      @muhammadabduhsiregar9190 Місяць тому

      @syketb I'm using rest api and must be add loading screen for block for refresh field and hit again for all table if using tanstact we can just retrieve 1 field updated?

    • @syketb
      @syketb Місяць тому

      @@muhammadabduhsiregar9190 I didn't get "we can just retrive 1 field updated?" means.

    • @muhammadabduhsiregar9190
      @muhammadabduhsiregar9190 Місяць тому

      @syketb just get 1 column of data for updated, maybe like button refresh progress for need newest data

  • @syketb
    @syketb Місяць тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @himankshu
    @himankshu Місяць тому

    bro.. whats the theme?

    • @syketb
      @syketb Місяць тому

      Dark Magic Themes

    • @himankshu
      @himankshu Місяць тому

      @@syketb thanks 🙏🏻

  • @sumanthprabhu11
    @sumanthprabhu11 Місяць тому

    Can u also add these topics in your videos for machine coding ? 1) Nested comments 2) File explorer with create , edit , delete functionality 3) Custom table with search , sort functionality in columns 4) Dropdown menu with search functionality

    • @syketb
      @syketb Місяць тому

      Hey, it’s great to see your suggestions! I’d love to add them. Thanks!

  • @TamzidUllMonir
    @TamzidUllMonir 2 місяці тому

    *expected content

    • @syketb
      @syketb 2 місяці тому

      Thanks, will get more related on this.

  • @syketb
    @syketb 2 місяці тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @syketb
    @syketb 2 місяці тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @syketb
    @syketb 2 місяці тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @syketb
    @syketb 2 місяці тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @syketb
    @syketb 2 місяці тому

    Follow me on LinkedIn: www.linkedin.com/in/syketb/ React JS Interview playlist: ua-cam.com/video/N7dX1vXhcI8/v-deo.html

  • @michaelsolomon6033
    @michaelsolomon6033 2 місяці тому

    You did great bro. Nice video

    • @syketb
      @syketb 2 місяці тому

      Thanks man, you liked it. great to see.

  • @TamzidUllMonir
    @TamzidUllMonir 2 місяці тому

    useful content.

    • @syketb
      @syketb 2 місяці тому

      Glad to hear that, tamzid

  • @pritamhippargekar1840
    @pritamhippargekar1840 2 місяці тому

    Can you add check boxes redio button, select drop down so it will be more useful in this context

    • @syketb
      @syketb 2 місяці тому

      Hey Pritam, thanks for suggestion will keep in mind.

  • @maheshpawaar
    @maheshpawaar 2 місяці тому

    Bro, discord link is invalid.

    • @syketb
      @syketb 2 місяці тому

      Yes i got to know discord allowed invitation link for a certain period after then it will automatic expired.

  • @maheshpawaar
    @maheshpawaar 2 місяці тому

    You made it so clear. Thanks, man!🤝

    • @syketb
      @syketb 2 місяці тому

      Hey man, this is my satisfaction. Thanks!