40 κορυφαίες ερωτήσεις και απαντήσεις συνέντευξης React JS (2026)

Προετοιμάζεστε για μια συνέντευξη στο React JS; Ήρθε η ώρα να εξερευνήσετε τι σας περιμένει. Κατανόηση Ερωτήσεις συνέντευξης Reaction JS βοηθά στην αποκάλυψη τόσο της εννοιολογικής σας σαφήνειας όσο και των δυνατοτήτων σας στην υλοποίηση σε πραγματικό κόσμο.

Το React JS προσφέρει τεράστιες ευκαιρίες σταδιοδρομίας για επαγγελματίες με τεχνική εμπειρία και εξειδίκευση στον τομέα. Είτε είστε νέος είτε τελειόφοιτος με 5 ή 10 χρόνια επαγγελματικής εμπειρίας, οι δεξιότητες ανάλυσης και η τεχνική εξειδίκευση έχουν σημασία. Αυτές οι ερωτήσεις και απαντήσεις βοηθούν τους ηγέτες ομάδων, τους διευθυντές και τους προγραμματιστές να βελτιώσουν τις δεξιότητές τους και να περάσουν τις συνεντεύξεις για να ξεπεράσουν τα όρια.

Βασισμένη σε πληροφορίες από περισσότερους από 85 επαγγελματίες, συμπεριλαμβανομένων διευθυντών προσλήψεων και τεχνικών ηγετών, αυτή η συλλογή αντικατοπτρίζει τις ποικίλες προσδοκίες του κλάδου και τα πραγματικά πρότυπα συνεντεύξεων που συλλέχθηκαν από ομάδες εργασίας σε διάφορους τομείς.

Κορυφαίες ερωτήσεις και απαντήσεις συνέντευξης React JS

1) Εξηγήστε το Εικονικό DOM και πώς λειτουργεί η συμφιλίωση στο React.

Απάντηση:

Το Εικονικό DOM είναι μια αναπαράσταση του UI στη μνήμη που διατηρεί το React για να υπολογίζει αποτελεσματικά τις αλλαγές στο UI. Όταν η κατάσταση ή τα props μεταλλάσσονται, το React αποδίδει ένα νέο δέντρο Εικονικού DOM και στη συνέχεια εκτελεί ένα διαφορετικός αλγόριθμο σε σχέση με το προηγούμενο δέντρο για να ανακαλύψει το ελάχιστο σύνολο πραγματικών λειτουργιών DOM που απαιτούνται. Αυτή η διαδικασία, που ονομάζεται συμφιλίωση, ελαχιστοποιεί την αλλοίωση της διάταξης και τις δαπανηρές αναδιαμορφώσεις του προγράμματος περιήγησης. Αναθέσεις React πλήκτρα σε στοιχεία σε λίστες για να βοηθήσει στην αντιστοίχιση κόμβων σε όλες τις εμφανίσεις και χρησιμοποιεί ευρετικές μεθόδους (όπως σύγκριση τύπων και κλειδιών) για να αποφασίσει εάν θα ενημερώσει, θα αναδιατάξει ή θα αφαιρέσει κόμβους. Τα οφέλη περιλαμβάνουν προβλέψιμες ενημερώσεις, μικρότερη επιφάνεια για σφάλματα και καλύτερη απόδοση σε σύνθετα περιβάλλοντα χρήστη.

Παράδειγμα:

Απόδοση δυναμικής λίστας μηνυμάτων συνομιλίας: χρησιμοποιώντας stable key τιμές (ID μηνυμάτων), μόνο νέα μηνύματα προστίθενται στο DOM, ενώ οι υπάρχοντες κόμβοι παραμένουν ανέπαφοι, αποφεύγοντας περιττές επαναλήψεις.

👉 Δωρεάν Λήψη PDF: Ερωτήσεις και Απαντήσεις Συνέντευξης React JS

2) Ποιοι είναι οι διαφορετικοί τύποι κύκλων ζωής στοιχείων στο React και πώς αντιστοιχίζονται τα Hooks σε αυτούς;

Απάντηση:

Τα στοιχεία React περνούν από φάσεις προσάρτησης, ενημέρωσης και αποπροσάρτησης. Στα στοιχεία κλάσης, μέθοδοι κύκλου ζωής όπως componentDidMount, shouldComponentUpdate, componentDidUpdate, και componentWillUnmount διέπουν τις παρενέργειες, τις αποφάσεις απόδοσης και τον καθαρισμό. Στα λειτουργικά στοιχεία, άγκιστρα παρέχουν ισοδύναμες δυνατότητες: useEffect χειρίζεται τα εφέ μετά την απόδοση· λειτουργίες καθαρισμού στο εσωτερικό useEffect εκτελείται κατά την αποσύνδεση ή πριν από το επόμενο εφέ. useMemo και useCallback έλεγχος της απομνημόνευσης· και useRef διατηρεί μεταβλητές αναφορές σε όλες τις αποδόσεις. Τα πλεονεκτήματα των Hooks περιλαμβάνουν τη δυνατότητα σύνθεσης, λιγότερα προβλήματα σύνδεσης "αυτό" και ευκολότερη επαναχρησιμοποίηση λογικής μέσω προσαρμοσμένων hooks, ενώ το κύριο μειονέκτημα είναι η ανάγκη εκμάθησης των Κανόνων των Hooks και της διαχείρισης εξαρτήσεων.

Απαντήστε με παραδείγματα:

Εφέ τοποθέτησης: useEffect(() => fetchData(), []).
Καθαρισμός κατά την αποσύνδεση: useEffect(() => { start(); return stop; }, []).

3) Πώς αποφασίζετε μεταξύ της απόδοσης από την πλευρά του πελάτη (CSR), της απόδοσης από την πλευρά του διακομιστή (SSR), της δημιουργίας στατικών ιστότοπων (SSG) και της στατικής αναγέννησης (ISR) για μια εφαρμογή React;

Απάντηση:

Η στρατηγική απόδοσης θα πρέπει να καθοδηγείται από τις απαιτήσεις εμπειρίας χρήστη, την ανανέωση των δεδομένων, τις ανάγκες SEO, τους περιορισμούς υποδομής και την ταχύτητα ανάπτυξης. ΕΚΕ Ταιριάζει σε εφαρμογές υψηλής διαδραστικότητας που βρίσκονται πίσω από τον έλεγχο ταυτότητας, όπου το SEO είναι δευτερεύον. SSR Παρέχει first paint με πραγματικά δεδομένα για δημόσιες σελίδες, βελτιώνοντας τον χρόνο έως το πρώτο byte και το SEO, αλλά με υψηλότερο κόστος διακομιστή. SSG Προϋπολογίζει σελίδες κατά τη στιγμή της δημιουργίας για εξαιρετική ταχύτητα και αποθήκευση στην προσωρινή μνήμη όταν τα δεδομένα αλλάζουν σπάνια. ISR Ενημερώνει τις στατικές σελίδες σταδιακά κατόπιν ζήτησης, προσφέροντας ισορροπία μεταξύ φρεσκάδας και απόδοσης. Οι παράγοντες περιλαμβάνουν την προσωρινή αποθήκευση, την εξατομίκευση, την καθυστέρηση για το παγκόσμιο κοινό και την επιχειρησιακή πολυπλοκότητα.

Πίνακας: Πλεονεκτήματα έναντι Μειονεκτημάτων

Προσέγγιση	Πλεονεκτήματα	Μειονεκτήματα
ΕΚΕ	Απλή φιλοξενία, πλούσια διαδραστικότητα	Πιο αργή πρώτη ζωγραφική, πιο αδύναμο SEO
SSR	Εξαιρετικό SEO, φρέσκα δεδομένα με την πρώτη φόρτωση	Υψηλότερο φόρτο εργασίας διακομιστή, πολυπλοκότητα
SSG	Γρήγορο, φθηνό, φιλικό προς το CDN	Παλιό περιεχόμενο μέχρι την ανακατασκευή
ISR	Γρήγορα με ελεγχόμενη φρεσκάδα	Περισσότερα κινούμενα μέρη προς διαχείριση

4) Ποια στρατηγική διαχείρισης κατάστασης πρέπει να χρησιμοποιηθεί: τοπική κατάσταση, Context, Redux ή βιβλιοθήκες ερωτημάτων;

Απάντηση:

Επιλέξτε απλούστερο εργαλείο που χειρίζεται τα χαρακτηριστικά του προβλήματος. Συστατικό-τοπική κατάσταση μέσω useState or useReducer είναι ιδανικό για μεμονωμένα προβλήματα UI. Πλαίσιο Λειτουργεί για τιμές που αφορούν κυρίως την ανάγνωση και καλύπτουν ολόκληρη την εφαρμογή (θέμα, τοπικές ρυθμίσεις, τρέχων χρήστης), αλλά δεν είναι βελτιστοποιημένο για ενημερώσεις υψηλής συχνότητας σε μεγάλα δέντρα. Redux ή παρόμοια καταστήματα που βασίζονται σε συμβάντα υπερέχουν όταν χρειάζεστε προβλεψιμότητα, εντοπισμό σφαλμάτων ταξιδιού στο χρόνο, middleware και αυστηρές μονοκατευθυντικές ροές δεδομένων. Βιβλιοθήκες ανάκτησης δεδομένων (για παράδειγμα, μοτίβα τύπου React Query) διαχειρίζονται τους κύκλους ζωής της κατάστασης του διακομιστή—caching, deduping, refetching στρατηγικές και συγχρονισμό—μειώνοντας τα στερεότυπα. Μια ρεαλιστική αρχιτεκτονική χρησιμοποιεί συχνά τοπική κατάσταση + Πλαίσιο για διαμόρφωση + βιβλιοθήκη κατάστασης διακομιστή, κρατώντας το Redux για σύνθετες ροές εργασίας.

Παράδειγμα:

Ένας πίνακας ελέγχου χρησιμοποιεί το React Query για την προσωρινή αποθήκευση API, το Context για το θέμα και useReducer μέσα σε σύνθετα γραφικά στοιχεία για τη διαχείριση τοπικών συμβάντων.

5) Ποια είναι η διαφορά μεταξύ του useEffect και του useLayoutEffect, και πότε εφαρμόζεται το καθένα;

Απάντηση:

useEffect εκτελείται αφού ολοκληρωθεί η επεξεργασία από το πρόγραμμα περιήγησης, καθιστώντας το κατάλληλο για εργασίες που δεν εμποδίζουν την πρόσβαση, όπως ανάκτηση δεδομένων, συνδρομές και καταγραφή. useLayoutEffect εκτελεί συγχρονισμένα μετά τις μεταλλάξεις DOM αλλά πριν από τη ζωγραφική, επιτρέποντας προσαρμογές μετρήσεων και διάταξης που πρέπει να πραγματοποιούνται χωρίς τρεμόπαιγμα (για παράδειγμα, ανάγνωση μεγεθών στοιχείων και σύγχρονη επανεφαρμογή στυλ). Το μειονέκτημα του useLayoutEffect είναι ότι μπορεί να εμποδίσει τη ζωγραφική και να βλάψει την απόκριση σε περίπτωση υπερβολικής χρήσης. Ένας καλός κανόνας είναι να ξεκινήσετε με useEffect για παρενέργειες και αναζητήστε useLayoutEffect μόνο όταν πρέπει να μετρήσετε ή να μεταλλάξετε ταυτόχρονα τη διάταξη για να διασφαλίσετε την οπτική ορθότητα.

Απαντήστε με παραδείγματα:

useEffect: ανάκτηση προφίλ χρήστη μετά την απόδοση.
useLayoutEffect: μετρήστε το μέγεθος μιας άκρης εργαλείου για να την τοποθετήσετε πριν τη βαφή.

Γρήγορη σύγκριση

Χαρακτηριστικός	useEffect	useLayoutEffect
Συγχρονισμός	Μετά τη βαφή	Πριν από τη βαφή
Περίπτωση χρήσης	Δεδομένα, συνδρομές	Μετρήσεις, διορθώσεις σύγχρονης διάταξης
Κίνδυνος	Μικρό τράνταγμα αν είναι βαρύ	Μπλοκάρει το χρώμα εάν είναι βαρύ

6) Εξηγήστε πώς λειτουργούν τα κλειδιά σε λίστες και τις παγίδες της χρήσης δεικτών πινάκων.

Απάντηση:

Τα κλειδιά επιτρέπουν στη συμφωνία του React να αναγνωρίζει με ακρίβεια τα στοιχεία λίστας μεταξύ των εμφανίσεων. Σταθερά, μοναδικά κλειδιά επιτρέπουν στο React να αναδιατάσσει, να εισάγει ή να αφαιρεί στοιχεία με ελάχιστη αλλαγή DOM. Χρησιμοποιώντας δείκτες πίνακα ως κλειδιά είναι προβληματική όταν τα στοιχεία μπορούν να αναδιαταχθούν, να εισαχθούν ή να διαγραφούν, επειδή το React μπορεί να συσχετίσει την προηγούμενη κατάσταση με λάθος στοιχείο, προκαλώντας ανεπαίσθητα σφάλματα (για παράδειγμα, λανθασμένες τιμές εισόδου ή κινούμενα σχέδια). Η καλύτερη πρακτική είναι να χρησιμοποιήσετε ένα αμετάβλητο, συγκεκριμένο για κάθε τομέα αναγνωριστικό, όπως ένα αναγνωριστικό βάσης δεδομένων. Εάν η λίστα είναι πραγματικά στατική και δεν αναδιατάσσεται ποτέ, οι δείκτες είναι αποδεκτοί, αλλά αυτή είναι η εξαίρεση παρά ο κανόνας.

Παράδειγμα:

Μια κάρτα Kanban με δυνατότητα μεταφοράς θα πρέπει να χρησιμοποιεί αναγνωριστικά καρτών, όχι δείκτες, για να διατηρεί την ταυτότητα των στοιχείων κατά τη μεταφορά και απόθεση.

7) Πού εφαρμόζονται οι τεχνικές απομνημόνευσης στο React και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;

Απάντηση:

Η απομνημόνευση μειώνει τους περιττούς υπολογισμούς και τις επαναλήψεις, επαναχρησιμοποιώντας προηγούμενα αποτελέσματα όταν οι εισροές δεν έχουν αλλάξει. Στο React, React.memo προσωρινή αποθήκευση, useMemo αποθηκεύει στην προσωρινή μνήμη ακριβούς υπολογισμούς και useCallback Απομνημονεύει τις ταυτότητες συναρτήσεων που μεταβιβάζονται σε παιδιά. Τα κύρια πλεονεκτήματα είναι η σταθερότητα της απόδοσης και η μειωμένη χρήση της CPU υπό έντονη αλληλεπίδραση. Τα μειονεκτήματα περιλαμβάνουν την πολυπλοκότητα, πιθανά σφάλματα στην προσωρινή μνήμη (cache) εάν οι εξαρτήσεις είναι λανθασμένες και την επιβάρυνση μνήμης.

Πίνακας: Διαφορετικοί τρόποι απομνημόνευσης

Χαρακτηριστικά	Σκοπός	Τυπικοί παράγοντες που πρέπει να ληφθούν υπόψη
`React.memo(Component)`	Παράλειψη επανάληψης απόδοσης εάν τα στηρίγματα είναι ρηχά-ίσα	Αστάθεια προσφοράς, κόστος παιδιού
`useMemo(fn, deps)`	Τιμές που υπολογίζονται από την προσωρινή μνήμη	Κόστος υπολογισμού έναντι μνήμης
`useCallback(fn, deps)`	Ταυτότητα σταθερής συνάρτησης	Ορθότητα εξάρτησης

Απαντήστε με παραδείγματα:

Απομνημονεύστε ένα φιλτραρισμένο, ταξινομημένο σύνολο δεδομένων για ένα πλέγμα χρησιμοποιώντας useMemoκαι τυλίξτε τα στοιχεία απόδοσης κελιών με React.memo για να αποφευχθούν οι καταιγίδες επανάληψης απόδοσης.

8) Προτιμάτε ελεγχόμενα ή μη ελεγχόμενα στοιχεία για τις φόρμες; Συζητήστε τα οφέλη, τα μειονεκτήματα και τους τύπους κατάστασης της φόρμας.

Απάντηση:

Ελεγχόμενα εξαρτήματα σύνδεση εισόδων στην κατάσταση React μέσω value και onChange, επιτρέποντας την επικύρωση, την απόκρυψη και το υπό όρους περιβάλλον χρήστη που προέρχονται από μία μόνο πηγή αλήθειας. Τα πλεονεκτήματα είναι η προβλεψιμότητα και η εύκολη ενσωμάτωση με άλλες καταστάσεις. Τα μειονεκτήματα περιλαμβάνουν το κόστος επαναπόδοσης με κάθε πάτημα πλήκτρου χωρίς βελτιστοποίηση. Μη ελεγχόμενα εξαρτήματα βασίζονται στο DOM ως πηγή αλήθειας χρησιμοποιώντας αναφορές, προσφέροντας χαμηλότερο κόστος και απλούστερη καλωδίωση για βασικές φόρμες, αλλά λιγότερο κεντρική επικύρωση. Για σύνθετες ροές εργασίας, ένα υβριδικό μοτίβο είναι συνηθισμένο, χρησιμοποιώντας ελεγχόμενες εισόδους για κρίσιμα πεδία και μη ελεγχόμενες για μεγάλες περιοχές με μεγάλο όγκο κειμένου.

Παράδειγμα:

Μια φόρμα εγγραφής χρησιμοποιεί ελεγχόμενα πεδία για την επικύρωση email και κωδικού πρόσβασης, ενώ μια περιοχή κειμένου σημειώσεων δεν ελέγχεται για τη μείωση του φόρτου επανεκτύπωσης.

9) Πότε θα χρησιμοποιούσατε το Context έναντι ενός προσαρμοσμένου hook και ποια είναι η διαφορά μεταξύ τους εννοιολογικά;

Απάντηση:

Πλαίσιο είναι ένα μηχανισμός μεταφοράς για τιμές που χρειάζονται πολλά στοιχεία, αποφεύγοντας την επεξεργασία στοιχείων στην προπέλα. Δεν διαχειρίζεται την κατάσταση από μόνο του. απλώς την εκθέτει σε απογόνους. Ένα προσαρμοσμένο γάντζο ενσωματώνει επαναχρησιμοποιήσιμη λογική—συνδυάζοντας κατάσταση, εφέ και εξωτερικές υπηρεσίες—που επιστρέφει τιμές και συναρτήσεις. Χρησιμοποιήστε το Context για να παρέχετε κοινόχρηστη διαμόρφωση, κυρίως ανάγνωσης ή για να εκθέσετε ένα κατάστημα και χρησιμοποιήστε προσαρμοσμένα άγκιστρα για να εφαρμόσετε τη συμπεριφορά του καταστήματος ή για να ενορχηστρώσετε ζητήματα όπως έλεγχο ταυτότητας, σημαίες λειτουργιών ή πολιτικές ανάκτησης δεδομένων. Τα δύο είναι συμπληρωματικά: ένα κοινό μοτίβο είναι useAuth() ως προσαρμοσμένο γάντζο που υποστηρίζεται από ένα AuthContext.

Απαντήστε με παραδείγματα:

AuthProvider παρέχει χρήστη και διακριτικά μέσω Context. useAuth χειρίζεται τα παρενέργειες σύνδεσης, ανανέωσης και αποσύνδεσης.

10) Μπορείτε να περιγράψετε στρατηγικές βελτίωσης της απόδοσης για μεγάλες εφαρμογές React, συμπεριλαμβανομένων των χαρακτηριστικών των αργών renders και των hotspots του κύκλου ζωής;

Απάντηση:

Η ρύθμιση της απόδοσης ξεκινά με τη μέτρηση. Προσδιορίστε αργές διαδρομές χρησιμοποιώντας το React DevTools Profiler και τα πάνελ απόδοσης του προγράμματος περιήγησης για να εντοπίσετε σημεία συμφιλίωσης και δαπανηρές δεσμεύσεις. Οι τακτικές περιλαμβάνουν πολιτειακή τοποθεσία (διατηρεί το κράτος κοντά στους καταναλωτές του), απομνημονεύσεις (React.memo, useMemo, useCallback), εικονικοποίηση λίστας για μακριές λίστες, διαχωρισμός κώδικα με χαλαρή φόρτωση για τη μείωση της αρχικής δέσμης, και αποκλιμάκωση ή στραγγαλισμός συμβάντα υψηλής συχνότητας. Για δεδομένα που υποστηρίζονται από διακομιστή, υιοθετήστε την προσωρινή αποθήκευση με μια βιβλιοθήκη ερωτημάτων και αξιοποιήστε φιλικό προς την αγωνία μοτίβα για ομαλότερη φόρτωση. Παρακολουθήστε για σημεία πρόσβασης στον κύκλο ζωής, όπως εφέ που εκτελούνται πολύ συχνά λόγω ευρέων πινάκων εξάρτησης ή στοιχεία που επανεμφανίζονται λόγω συχνά μεταβαλλόμενων τιμών περιβάλλοντος.

Απαντήστε με παραδείγματα:

Εικονικοποιήστε έναν πίνακα 10,000 γραμμών χρησιμοποιώντας μια βιβλιοθήκη παραθύρων. Φορτώστε βαριά γραφήματα με αργή φόρτωση πίσω από τον διαχωρισμό κώδικα βάσει διαδρομής για να βελτιώσετε την αρχική σχεδίαση.

11) Ποια είναι η διαφορά μεταξύ των props και της κατάστασης στο React;

Απάντηση:

Και τα δύο props και state επηρεάζουν τον τρόπο απόδοσης των στοιχείων, αλλά ο σκοπός και ο κύκλος ζωής τους διαφέρουν θεμελιωδώς. Σφήνες (συντομογραφία για ιδιότητες) είναι αμετάβλητες είσοδοι που μεταβιβάζονται από ένα γονικό στοιχείο σε ένα θυγατρικό στοιχείο, καθορίζοντας τη διαμόρφωση ή τα δεδομένα για απόδοση. Ρέουν προς τα κάτω στη μονοκατευθυντική ροή δεδομένων του React και δεν πρέπει ποτέ να τροποποιείται από το στοιχείο λήψης. Κατάσταση, από την άλλη πλευρά, είναι μεταβλητό και συντηρείται εσωτερικά από το στοιχείο. Καθορίζει δυναμική συμπεριφορά που αλλάζει με την πάροδο του χρόνου, όπως τιμές εισόδου φόρμας ή εναλλαγή ορατότητας.

Πίνακας Βασικών Διαφορών:

Παράγοντας	Σφήνες	Κατάσταση
Ευμετάβλητο	Αμετάβλητος	Ευμετάβλητος
Ιδιοκτησία	Πέρασε από τον γονέα	Ανήκει σε στοιχείο
Μέθοδος ενημέρωσης	Γονικές αναπαραγωγές	`useState` or `setState`
Χρήση θήκης	διαμόρφωση	Δυναμικές αλλαγές στο περιβάλλον χρήστη
Κύκλος Ζωής	Υπάρχει κατά την απόδοση	Επιμένει, ενεργοποιεί επαναλήψεις

Παράδειγμα:

A <Button color="blue" /> χρησιμοποιεί στηρίγματα για να αποφασίσει το χρώμα, ενώ ένα clicked Η λογική τιμή στην κατάστασή της εναλλάσσει την οπτική ανατροφοδότηση.

12) Εξηγήστε το μοτίβο αρχιτεκτονικής των στοιχείων στο React και τους διαφορετικούς τρόπους ταξινόμησης των στοιχείων.

Απάντηση:

Οι εφαρμογές React ακολουθούν ένα αρχιτεκτονική βασισμένη σε στοιχεία, χωρίζοντας το UI σε μικρά, επαναχρησιμοποιήσιμα δομικά στοιχεία. Τα στοιχεία μπορούν να κατηγοριοποιηθούν ανάλογα με το σκοπός και ευθύνη:

Παρουσιαστικά (Χαζά) Στοιχεία – Εστίαση στο UI, λήψη δεδομένων μέσω props και σπάνια διαχείριση κατάστασης.
Στοιχεία κοντέινερ (έξυπνα) – Χειρίζονται τη λογική, ανακτούν δεδομένα και διαχειρίζονται την κατάσταση· αποδίδουν στοιχεία παρουσίασης.
Στοιχεία Ανώτερης Τάξης (HOCs) – Συναρτήσεις που δέχονται ένα στοιχείο και επιστρέφουν μια βελτιωμένη έκδοση με πρόσθετη συμπεριφορά.
Καθαρά Συστατικά – Βελτιστοποιήστε την απόδοση συγκρίνοντας επιφανειακά τα props και την κατάσταση.
Λειτουργικά έναντι στοιχείων κλάσης – Τα λειτουργικά στοιχεία (με άγκιστρα) προτιμώνται πλέον για λόγους αναγνωσιμότητας και απόδοσης.

Παράδειγμα:

A <UserProfile /> το στοιχείο μπορεί να είναι παρουσιάσιμο, λαμβάνοντας πληροφορίες χρήστη, ενώ <UserProfileContainer /> ανακτά δεδομένα και διαχειρίζεται τον κύκλο ζωής τους.

13) Πώς χειρίζεται το React τα όρια σφάλματος και γιατί είναι σημαντικά;

Απάντηση:

Όρια σφάλματος είναι ειδικά στοιχεία React που συλλαμβάνουν JavaΣφάλματα σεναρίου οπουδήποτε στο δέντρο των θυγατρικών στοιχείων τους κατά την απόδοση, τις μεθόδους κύκλου ζωής ή τους κατασκευαστές. Αποτρέπουν ολόκληρες διακοπές λειτουργίας εφαρμογών απομονώνοντας αποτυχίες σε συγκεκριμένα δευτερεύοντα δέντρα. Μπορείτε να υλοποιήσετε ένα χρησιμοποιώντας componentDidCatch(error, info) και static getDerivedStateFromError() σε ένα στοιχείο κλάσης.

Πλεονεκτήματα:

Διατηρήστε τη σταθερότητα του περιβάλλοντος εργασίας χρήστη εμφανίζοντας εφεδρικά περιβάλλοντα εργασίας χρήστη.
Καταγραφή και καταγραφή σφαλμάτων για αναλυτικά στοιχεία.
Αποτρέψτε τις διαδοχικές αποσυνδέσεις.

Παράδειγμα:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}

14) Τι είναι τα React Fragments και πώς διαφέρουν από το wrapper; στοιχεία;

Απάντηση:

Αντίδραση Κομμάτια (<></>) σας επιτρέπει να ομαδοποιείτε πολλά στοιχεία χωρίς να προσθέτετε επιπλέον κόμβους στο DOM. Αυτό είναι απαραίτητο για μια πιο καθαρή δομή, ειδικά σε λίστες, πίνακες και σημασιολογική HTML όπου τα πρόσθετα περιτυλίγματα ενδέχεται να προκαλέσουν προβλήματα διάταξης ή προσβασιμότητας. Σε αντίθεση με το περιτύλιγμα <div>s, Τα τμήματα δεν αποδίδονται στο DOM και ως εκ τούτου έχουν πλεονεκτήματα απόδοσης και σημασιολογίας.

Παράδειγμα:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Πίνακας Διαφορών:

Παράγοντας	τεμάχιο	`<div>` Περικάλυμμα
Έξοδος DOM	Ν/Α	Προσθέτει επιπλέον κόμβο
Χρήση θήκης	Δομική ομαδοποίηση	Στυλ ή διάταξη
💪 Βελτίωση της απόδοσης στην άσκηση	Καλύτερα	Ελαφρώς επιβάρυνση

15) Ποιο React Hook θα χρησιμοποιούσατε για βελτιστοποίηση απόδοσης και γιατί;

Απάντηση:

Τα στοιχεία React που είναι ευαίσθητα στην απόδοση συχνά βασίζονται σε άγκιστρα απομνημόνευσης και τεμπέλης φόρτωσης για την ελαχιστοποίηση της περιττής εργασίας. Τα συνηθισμένα άγκιστρα περιλαμβάνουν:

useMemo → Αποθηκεύει στην προσωρινή μνήμη υπολογιστικά ακριβά αποτελέσματα.
useCallback → Αποτρέπει τις περιττές θυγατρικές αποδόσεις λόγω αλλαγών στην ταυτότητα συνάρτησης.
useTransition → Αναβάλλει τις μη επείγουσες ενημερώσεις για πιο ομαλό περιβάλλον χρήστη.
useDeferredValue → Καθυστερεί τους μεγάλους υπολογισμούς μέχρι μετά από άμεσες αλληλεπιδράσεις.

Παράδειγμα:

Ένα μεγάλο πλέγμα δεδομένων που χρησιμοποιεί useMemo για φιλτραρισμένα αποτελέσματα μπορεί να μειώσει την κατανάλωση CPU κατά 50% ή περισσότερο.

Πλεονεκτήματα:

Μειώνει την σπατάλη των σοβάδων.
Διατηρεί το περιβάλλον χρήστη σε απόκριση υπό φόρτο.

Μειονέκτημα:

Απαιτείται ακρίβεια εξαρτήσεων. Ενδέχεται να προκύψουν σφάλματα παλιάς προσωρινής μνήμης εάν η διαχείρισή τους είναι εσφαλμένη.

16) Τι είναι οι Πύλες React και ποια είναι τα πλεονεκτήματά τους;

Απάντηση:

Πύλες επιτρέπουν στα στοιχεία του React να αποδίδουν τα παιδιά σε έναν κόμβο DOM εκτός της ιεραρχίας των γονέων τους, συνήθως για modals, tooltips ή dropdowns που πρέπει οπτικά να "ξεφύγουν" από υπερχείλιση ή στοίβαξη. Υλοποιήθηκε χρησιμοποιώντας ReactDOM.createPortal(child, container), διατηρούν τη συνέπεια της δημιουργίας φυσαλίδων συμβάντων, επομένως οι χειριστές συμβάντων λειτουργούν σαν το στοιχείο να παρέμενε εντός της αρχικής του ιεραρχίας.

Πίνακας πλεονεκτημάτων:

Πλεονέκτημα	Περιγραφή
Διαρθρωτική Ανεξαρτησία	Απόδοση εκτός του γονικού δέντρου
Έλεγχος CSS/Στοίβαξης	Αποφύγετε `overflow: hidden` ή προβλήματα με τον δείκτη z
Διάδοση Γεγονότων	Τα συνθετικά συμβάντα του React εξακολουθούν να εμφανίζονται σωστά.
Επαναχρησιμοποίηση	Ιδανικό για καθολικές επικαλύψεις

Παράδειγμα:

createPortal(<ModalContent />, document.getElementById('modal-root'));

17) Εξηγήστε πώς το React Router διαχειρίζεται την πλοήγηση και την κατάσταση μεταξύ σελίδων.

Απάντηση:

Το React Router είναι μια δηλωτική βιβλιοθήκη δρομολόγησης που συγχρονίζει το UI με τη διεύθυνση URL του προγράμματος περιήγησης. Χρησιμοποιεί το API ιστορικού για χειρισμό του ιστορικού συνεδριών χωρίς επαναφορτώσεις ολόκληρης της σελίδας. Οι βασικές έννοιες περιλαμβάνουν διαδρομές, Συνδέσμοι, και Outlet για ένθετη δρομολόγηση. Η βιβλιοθήκη υποστηρίζει δυναμικές διαδρομές, Παράμετροι URL, και άγκιστρα πλοήγησης (useNavigate, useParams, useLocation). Το React Router v6 εισήγαγε μια απλοποιημένη σύνταξη και API δεδομένων για φορτωτής και δράση λειτουργίες, βελτιώνοντας την ενσωμάτωση της SSR και τη διαχείριση του κράτους.

Παράδειγμα:

<Route path="/user/:id" element={<UserProfile />} />

οφέλη:

Επιτρέπει την πλοήγηση σε μία μόνο σελίδα.
Διατηρεί τη θέση κύλισης και το ιστορικό.
Ενσωματώνεται ομαλά με την αργή φόρτωση για καλύτερη απόδοση.

18) Ποιοι είναι οι διαφορετικοί τρόποι αντιμετώπισης παρενεργειών σε εφαρμογές React;

Απάντηση:

Οι παρενέργειες αναφέρονται σε ενέργειες που επηρεάζουν κάτι εκτός του πεδίου εφαρμογής ενός στοιχείου (κλήσεις API, χειρισμός DOM, συνδρομές). Τα κύρια εργαλεία περιλαμβάνουν:

useEffect για εφέ από την πλευρά του πελάτη μετά την απόδοση.
Χειριστές συμβάντων για εφέ που καθορίζονται από τον χρήστη.
Προσαρμοσμένα άγκιστρα για να επαναχρησιμοποιήσετε τη λογική των εφέ (για παράδειγμα, useFetch).
Middleware (όπως το Redux Saga ή το Thunk) για σύνθετη ασύγχρονη ενορχήστρωση.
Ερώτημα αντίδρασης ή SWR για την αυτόματη διαχείριση της κατάστασης του διακομιστή και των κύκλων ζωής επαναφοράς.

Παράδειγμα:

A useEffect ανακτά δεδομένα μόλις γίνει η προσάρτηση:

useEffect(() => { fetchData(); }, []);

Πλεονεκτήματα:

Απλοποιημένη ασύγχρονη διαχείριση, καλύτερη ενθυλάκωση και σαφέστερος έλεγχος κύκλου ζωής.

19) Είναι το React ένα πλαίσιο ή μια βιβλιοθήκη; Συζητήστε τους παράγοντες που καθορίζουν τη διαφορά.

Απάντηση:

Το React είναι επίσημα ένα βιβλιοθήκη, όχι ένα πλήρες πλαίσιο. Εστιάζει αποκλειστικά στο προβολή επιπέδου, παρέχοντας αφαιρέσεις απόδοσης, κατάστασης και στοιχείων χωρίς να επιβάλλει δρομολόγηση, ανάκτηση δεδομένων ή δομή δημιουργίας.

Συγκριτικός πίνακας:

Παράγοντας	Βιβλιοθήκη (React)	Πλαίσιο (Angular, Vue)
Scope	Προβολή απόδοσης	Πλήρης αρχιτεκτονική MVC
Δογματικός	Χαμηλός	Ψηλά
Έλεγχος	καθοδηγούμενο από προγραμματιστές	Βασισμένο σε πλαίσιο
Ευελιξία	Ψηλά	Περιορίζεται από συμβάσεις
Καμπύλη εκμάθησης	Μέτρια	Υψηλότερο λόγω πολυπλοκότητας

Το οικοσύστημα του React (Redux, Router, Query, Next.js) ουσιαστικά σχηματίζει ένα «μετα-πλαίσιο», προσφέροντας δυνατότητα σύνθεσης σε αρθρωτά στοιχεία που επιτρέπει στους προγραμματιστές να δημιουργήσουν τη δική τους αρχιτεκτονική.

20) Πότε πρέπει να χρησιμοποιείτε το React.lazy και το Suspense και ποια είναι τα πλεονεκτήματά τους;

Απάντηση:

React.lazy δίνει τη δυνατότητα διαχωρισμός κώδικα φορτώνοντας δυναμικά στοιχεία μόνο όταν χρειάζεται, ενώ Suspense παρέχει ένα εφεδρικό περιβάλλον χρήστη μέχρι να είναι έτοιμο το στοιχείο. Αυτός ο συνδυασμός βελτιώνει την αρχική απόδοση φόρτωσης και την απόκριση που αντιλαμβάνεται ο χρήστης.

Παράδειγμα:

const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
  <Chart />
</Suspense>

Πίνακας πλεονεκτημάτων:

Πλεονέκτημα	εξήγηση
💪 Βελτίωση της απόδοσης στην άσκηση	Φορτώνει κώδικα κατ' απαίτηση
Η εμπειρία χρήστη	Εύκολη φόρτωση εφεδρικής λειτουργίας
Μέγεθος δέσμης	Μικρότερη αρχική δέσμη
Απλότητα	Εγγενές API React, ελάχιστη ρύθμιση

Καλυτερα Πρακτικές:

Τυλίξτε πολλά lazy στοιχεία σε ένα όριο Suspense.
Χρησιμοποιήστε ουσιαστικούς εφεδρικούς δείκτες για την προσβασιμότητα.

21) Εξηγήστε τι είναι τα Στοιχεία React Server (RSC) και τα πλεονεκτήματά τους.

Απάντηση:

Τα React Server Components (RSCs) αποτελούν μια σημαντική καινοτομία που εισήχθη για τη βελτίωση της απόδοσης και της εμπειρίας των προγραμματιστών, επιτρέποντας στα components να... απόδοση στον διακομιστή χωρίς να στείλουν τα JavaΣενάριο στον πελάτηΕκτελούνται εξ ολοκλήρου στον διακομιστή, ανακτώντας δεδομένα, διαβάζοντας από βάσεις δεδομένων ή εκτελώντας λειτουργίες εισόδου/εξόδου με ασφάλεια πριν από τη ροή σειριοποιημένης εξόδου στον πελάτη.

Πλεονεκτήματα:

Μικρότερο μέγεθος δέσμης — Δεν υπάρχει JS πελάτη για λογική μόνο διακομιστή.
Βελτιωμένη απόδοση — Η ανάκτηση δεδομένων από την πλευρά του διακομιστή μειώνει τα waterfalls.
Ασφάλεια — Ο ευαίσθητος κώδικας δεν φτάνει ποτέ στο πρόγραμμα περιήγησης.
Καλύτερη προσωρινή αποθήκευση — Τα στοιχεία του διακομιστή είναι αποθηκευμένα στην προσωρινή μνήμη (cache) στην άκρη.

Παράδειγμα:

A <ProductList /> Το στοιχείο διακομιστή μπορεί να ανακτήσει δεδομένα απευθείας από μια βάση δεδομένων και να μεταβιβάσει τα αποτελέσματα σε ένα <ProductCard /> στοιχείο πελάτη.

22) Ποια είναι η διαφορά μεταξύ της ενυδάτωσης React και της συμφιλίωσης;

Απάντηση:

Ενώ και οι δύο όροι περιλαμβάνουν την ενημέρωση του UI από το React, ο σκοπός τους διαφέρει:

Συμφιλίωση είναι η διαδικασία σύγκρισης του εικονικού δέντρου DOM με την προηγούμενη έκδοσή του για να προσδιοριστεί το ελάχιστο σύνολο ενημερώσεων DOM.
Ενυδάτωση, από την άλλη πλευρά, είναι η διαδικασία σύνδεσης των ακροατών συμβάντων και των εσωτερικών δομών του React σε HTML που αποδίδεται από διακομιστή από την πλευρά του πελάτη, μετατρέποντας τη στατική σήμανση σε μια πλήρως διαδραστική εφαρμογή.

Συγκριτικός πίνακας:

Παράγοντας	Συμφιλίωση	Ενυδάτωση
Σκανδάλη	Επανααπόδοση από τον πελάτη	Αρχική φόρτωση σελίδας (SSR)
Σκοπός	Αποτελεσματική ενημέρωση DOM	Κάντε την SSR HTML διαδραστική
Scope	Διαφοροποίηση εικονικού DOM	Σύνδεση συμβάντος + επανασύνδεση κατάστασης
Συχνότητα	Πολλαπλές φορές	Μόλις ολοκληρωθεί η απόδοση SSR

Παράδειγμα:

Αφού μια εφαρμογή Next.js στείλει προ-αποδοσμένη HTML, το React ενυδατώνει έτσι ώστε τα στοιχεία να ανταποκρίνονται σε συμβάντα χωρίς να επανααποδίδουν τα πάντα.

23) Πώς βελτιώνει η Ταυτόχρονη Απόδοση την εμπειρία χρήστη στο React 18+;

Απάντηση:

Η ταυτόχρονη απόδοση επιτρέπει στο React να διακόπτει, να θέτει σε παύση ή να συνεχίζει την εργασία απόδοσης με βάση την προτεραιότητα του χρήστη. Αυτό αποτρέπει το πάγωμα του UI κατά τη διάρκεια βαρέων υπολογισμών ή επαναλήψεων. Χαρακτηριστικά όπως useTransition και useDeferredValue αξιοποιήστε αυτή την ικανότητα για να διαχωρίσετε επείγουσες ενημερώσεις (σαν να πληκτρολογώ) από μη επείγον αυτά (όπως το φιλτράρισμα).

οφέλη:

Ομαλές, ανταποκρινόμενες αλληλεπιδράσεις.
Χρονική περικοπή για την αποφυγή μπλοκαρίσματος του κύριου νήματος.
Προβλέψιμη ιεράρχηση προτεραιοτήτων για καλύτερη εμπειρία χρήστη.

Παράδειγμα:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredList(filter(items, term)));

Εδώ, η πληκτρολόγηση παραμένει ρευστή ακόμα και κατά το φιλτράρισμα μεγάλων συνόλων δεδομένων, επειδή το React προγραμματίζει ταυτόχρονα μη επείγουσες ενημερώσεις.

24) Ποιοι είναι οι διαφορετικοί τρόποι εκτέλεσης δοκιμών σε εφαρμογές React;

Απάντηση:

Οι δοκιμές αντίδρασης μπορούν να ταξινομηθούν σε μονάδα, ολοκλήρωση, και από άκρη σε άκρη επίπεδα.

Πίνακας μεθόδων δοκιμής:

Χαρακτηριστικά	Εργαλείο	Σκοπός
Μονάδα	υπάρχει	Δοκιμή μεμονωμένων συναρτήσεων/στοιχείων
Ενσωμάτωση	Βιβλιοθήκη δοκιμών αντιδράσεων	Δοκιμή αλληλεπιδράσεων UI και αλλαγών κατάστασης
E2E	Cypress / Θεατρικός συγγραφέας	Δοκιμή ροών χρηστών σε πραγματικά προγράμματα περιήγησης

Καλυτερα Πρακτικές:

Προτιμώ Βιβλιοθήκη δοκιμών αντιδράσεων πάνω από το ένζυμο (σύγχρονο, προσανατολισμένο στο DOM).
Προσομοιωτικά API που χρησιμοποιούν msw (Ψεύτικος Εργαζόμενος Υπηρεσιών).
Αποφύγετε τον έλεγχο των λεπτομερειών υλοποίησης—εστιάστε στη συμπεριφορά.

Παράδειγμα:

test('renders user name', () => {
  render(<User name="Alice" />);
  expect(screen.getByText(/Alice/)).toBeInTheDocument();
});

25) Ποια εργαλεία δημιουργίας και bundlers χρησιμοποιούνται πιο συχνά με το React και ποιες είναι οι διαφορές τους;

Απάντηση:

Το React μπορεί να ενσωματωθεί με διάφορους bundlers και compilers, καθένας από τους οποίους είναι βελτιστοποιημένος για διαφορετικές περιπτώσεις χρήσης.

Συγκριτικός πίνακας:

Εργαλείο	Χαρακτηριστικά:	Πλεονεκτήματα	Μειονεκτήματα
Webpack	Εξαιρετικά παραμετροποιήσιμο	Ώριμο, πλούσιο σε πρόσθετα	Σύνθετη εγκατάσταση
Ζει	Βασισμένος σε ESM, εξαιρετικά γρήγορος διακομιστής ανάπτυξης	Άμεσο HMR, σύγχρονη σύνταξη	Περιορισμένη υποστήριξη παλαιών προσθηκών
Δέμα	Μηδενική διαμόρφωση	Αυτόματη βελτιστοποίηση	Less εύκαμπτος
esbuild	Μεταγλωττιστής που βασίζεται σε Go	Εξαιρετικά γρήγορα	Λιγότερα πρόσθετα οικοσυστήματος

Παράδειγμα:

Τα σύγχρονα έργα συχνά υιοθετούν Ζει για την ταχύτητα ανάπτυξης και esbuild σε αγωγούς CI/CD για αποτελεσματικές κατασκευές παραγωγής.

26) Πώς επεκτείνει το Next.js τις δυνατότητες του React;

Απάντηση:

Το Next.js είναι ένα Πλαίσιο React Παρέχοντας εδραιωμένη αρχιτεκτονική για δρομολόγηση, SSR και στατική δημιουργία. Εισάγει υβριδικά μοντέλα απόδοσης, διαδρομές API και λειτουργίες ανάπτυξης edge-ready.

Πλεονεκτήματα:

Built-in SSR/SSG/ISR Υποστήριξη.
Δρομολογητής εφαρμογών με τα στοιχεία του React Server.
Βελτιστοποίηση εικόνας και μεσαίο λογισμικό για απόδοση και ασφάλεια.
Εύκολες διαδρομές API για λειτουργίες χωρίς διακομιστή.

Παράδειγμα:

app/page.js για σελίδες που έχουν αποδοθεί με SSR. app/api/route.js για τα τελικά σημεία διακομιστή.

Περιληπτικά, Το Next.js επιτρέπει εφαρμογές React παραγωγικού επιπέδου με ελάχιστη διαμόρφωση.

27) Ποιες είναι μερικές συνηθισμένες παγίδες απόδοσης στο React και πώς μπορείτε να τις αποφύγετε;

Απάντηση:

Συνηθισμένα μειονεκτήματα απόδοσης του React περιλαμβάνουν:

Περιττές επαναλήψεις — Διόρθωση χρησιμοποιώντας React.memo ή διαχωρισμός εξαρτημάτων.
Δημιουργία ενσωματωμένων αντικειμένων/πίνακων — Χρήση useMemo για σταθερές αναφορές.
Μεγάλες λίστες — Υλοποίηση παραθύρων (react-window, react-virtualized).
Βαρείς υπολογισμοί — Απομνημονεύστε ή μεταβιβάστε το περιεχόμενο σε εργαζόμενους ιστού.
Υπερβολική χρήση του πλαισίου — Οι συχνές ενημερώσεις διαδίδονται σε μεγάλο βαθμό· προτιμάται η παράγωγη κατάσταση.

Παράδειγμα:

Αν περάσεις { a: 1 } ενσωματωμένο σε ένα απομνημονευμένο στοιχείο, επανεμφανίζεται σε κάθε γονική απόδοση. Διορθώστε το με την απομνημόνευση του αντικειμένου.

Πίνακας συμβουλών απόδοσης:

Ζήτημα	Τεχνική Βελτιστοποίησης
Επανααποδόσεις	`React.memo, useCallback`
Ακριβοί υπολογισμοί	`useMemo`, Εργαζόμενοι Ιστού
Μεγάλα σύνολα δεδομένων	Εικονικοποίηση
Συχνές ενημερώσεις περιβάλλοντος	Τοπική προσαρμογή κατάστασης

28) Εξηγήστε τη διαφορά μεταξύ των useReducer και useState.

Απάντηση:

Και τα δύο hooks διαχειρίζονται την κατάσταση, αλλά διαφέρουν ως προς την πολυπλοκότητα και τον έλεγχο.

useState είναι ιδανικό για απλές, απομονωμένες μεταβάσεις καταστάσεων.
useReducer συγκεντρώνει τη σύνθετη λογική κατάστασης σε ένα λειτουργία μειωτήρα, με τη χρήση dispatch ενέργειες για προβλέψιμες ενημερώσεις.

Συγκριτικός πίνακας:

Παράγοντας	χρησιμοποιήστε το κράτος	useReducer
Σύνταξη	`[value, setValue]`	`[state, dispatch]`
Περίπλοκο	Απλούς	Μέτρια έως πολύπλοκη
Χρήση θήκης	Ανεξάρτητα κράτη	Σχετικές ή ένθετες καταστάσεις
Debugging	Less πολύλογος	Ευκολότερα μέσω καταγεγραμμένων ενεργειών
Παράδειγμα	Εναλλαγές φόρμας	Επικύρωση φόρμας ή φόρμες πολλαπλών βημάτων

Παράδειγμα:

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

29) Πώς μπορείτε να βελτιώσετε την προσβασιμότητα (a11y) σε εφαρμογές React;

Απάντηση:

Η προσβασιμότητα διασφαλίζει ότι όλοι οι χρήστες, συμπεριλαμβανομένων εκείνων με αναπηρίες, μπορούν να χρησιμοποιούν την εφαρμογή σας αποτελεσματικά. Το React διευκολύνει την προσβασιμότητα μέσω σημασιολογικής σήμανσης και χαρακτηριστικών ARIA.

Καλυτερα Πρακτικές:

Χρήση σημασιολογική HTML (<button> vs <div onClick>).
Διαχείριση εστίασης χρησιμοποιώντας ref και tabIndex.
Χρησιμοποιήστε ρόλους ARIA για δυναμικά στοιχεία.
Βεβαιωθείτε για την αντίθεση χρωμάτων και τις εναλλακτικές λύσεις κειμένου για τις εικόνες.
Μόχλευση εργαλεία όπως eslint-plugin-jsx-a11y και πυρήνας τσεκουριού για ελέγχους.

Παράδειγμα:

<button aria-label="Close dialog" onClick={closeModal}>×</button>

Πλεονεκτήματα:

Ευρύτερη προσέγγιση κοινού.
Βελτίωση SEO.
Συμμόρφωση με τα πρότυπα WCAG.

30) Μπορείτε να περιγράψετε πώς διαφέρουν ο διαχωρισμός κώδικα και η αργή φόρτωση, και πότε πρέπει να χρησιμοποιείται η καθεμία;

Απάντηση:

Και οι δύο τεχνικές βελτιστοποιούν το μέγεθος της δέσμης και την απόδοση φορτίου, αλλά διαφέρουν ως προς χρονισμός εκτέλεσης.

Διαχωρισμός κώδικα Χωρίζει μεγάλες δέσμες σε μικρότερα κομμάτια που μπορούν να φορτωθούν ανεξάρτητα.
Lazy φόρτωση καθυστερεί τη φόρτωση αυτών των κομματιών μέχρι να χρειαστούν.

Συγκριτικός πίνακας:

Παράγοντας	Διαχωρισμός κώδικα	Lazy Φόρτωση
Ορισμός	Χωρίζει τον κώδικα σε κομμάτια	Φορτώνει κομμάτια κατ' απαίτηση
Εργαλείο	Πακέτο Ιστού, Vite	`React.lazy`, δυναμική `import()`
Σκοπός	Βελτιστοποίηση μεγέθους δέσμης	Βελτιώστε την απόδοση κατά τον χρόνο εκτέλεσης
Εκτέλεση	Χρόνος κατασκευής	Διάρκεια

Παράδειγμα:

const Settings = React.lazy(() => import('./Settings'));

Χρησιμοποιούμενες μαζί, αυτές οι τεχνικές μειώνουν τον χρόνο αλληλεπίδρασης και βελτιώνουν την αντιληπτή ταχύτητα των μεγάλων εφαρμογών.

31) Εξηγήστε την έννοια των Render Props και πώς διαφέρει από τα Higher-Order Components (HOCs).

Απάντηση:

Render Props είναι ένα μοτίβο στο React όπου ένα στοιχείο δέχεται ένα λειτουργεί ως στήριγμα που του λέει τι να αποδώσει. Αυτό επιτρέπει την κοινή χρήση της λογικής των στοιχείων μεταξύ πολλαπλών στοιχείων χωρίς διπλασιασμό.

Οι HOC, από την άλλη πλευρά, τυλίξτε ένα στοιχείο και να επιστρέψει μια βελτιωμένη έκδοση με ενσωματωμένα στηρίγματα ή συμπεριφορές.

Συγκριτικός πίνακας:

Παράγοντας	Render Props	HOC
Εκτέλεση	Λειτουργήστε ως παιδί	Στοιχείο περιτύλιξης συνάρτησης
Σύνθεση	Ενσωματωμένος έλεγχος	Δηλωτική περιτύλιξη
ευανάγνωστο	Συχνά πιο ξεκάθαρο	Μπορεί να προκαλέσει κόλαση στο περιτύλιγμα
Χρήση θήκης	Λογική δυναμικής απόδοσης	Οριζόντιες ανησυχίες

Παράδειγμα:

<DataProvider render={data => <UserList users={data} />} />

Τα Render Props προσφέρουν καλύτερη ευελιξία και αποφεύγουν τις συγκρούσεις ονομάτων που είναι συχνές στα HOC.

32) Ποιοι είναι οι διαφορετικοί τύποι προσαρμοσμένων γάντζων και τα πλεονεκτήματά τους;

Απάντηση:

Τα προσαρμοσμένα άγκιστρα ενσωματώνουν επαναχρησιμοποιήσιμη λογική που συνδυάζει την κατάσταση, τις παρενέργειες και τα βοηθητικά προγράμματα. Βελτιώνουν την επαναχρησιμοποίηση του κώδικα, τον διαχωρισμό των ζητημάτων και τη δυνατότητα δοκιμής.

Τύποι & Παραδείγματα:

Άγκιστρα διαχείρισης κράτους - useToggle, useForm.
Άγκιστρα ανάκτησης δεδομένων - useFetch, useQuery.
Άγκιστρα UI/UX - useWindowSize, useDarkMode.
Άγκιστρα ολοκλήρωσης - useLocalStorage, useMediaQuery.
Γάντζοι απόδοσης - useDebounce, useThrottle.

Πλεονεκτήματα:

Επαναχρησιμοποίηση κεντρικής λογικής.
Καθαρότερα εξαρτήματα.
Ανεξάρτητες δοκιμές.

Παράδειγμα:

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
  return [value, setValue];
}

33) Πώς αντιμετωπίζετε τις διαρροές μνήμης σε εφαρμογές React;

Απάντηση:

Οι διαρροές μνήμης συμβαίνουν όταν τα μη προσαρτημένα στοιχεία εξακολουθούν να διατηρούν αναφορές σε πόρους ή συνδρομές. Υποβαθμίζουν την απόδοση και προκαλούν απρόβλεπτη συμπεριφορά.

Τεχνικές πρόληψης:

Εφέ καθαρισμού in useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []);
Διακοπή ασύγχρονων κλήσεων η AbortController.
Αποφύγετε τη διατήρηση παλιών κλεισιμάτων αναφορά σε παλιά στηρίγματα/κατάσταση.
Διαγραφή από συμβάντα ή υποδοχές κατά την αποσύνδεση.
Χρησιμοποιήστε το React Profiler για την ανίχνευση αργής ανάπτυξης μνήμης.

Παράδειγμα:

Σε μια εφαρμογή συνομιλίας, να αποσυνδέετε πάντα τους ακροατές υποδοχής όταν ένας χρήστης απομακρύνεται από την αίθουσα συνομιλίας.

34) Ποιες είναι οι βέλτιστες πρακτικές για τη διαχείριση φορμών σε μεγάλες εφαρμογές React;

Απάντηση:

Η διαχείριση φορμών σε εφαρμογές React σε εταιρική κλίμακα απαιτεί ισορροπία μεταξύ ελέγχου, απόδοσης και συντηρησιμότητας.

Καλυτερα Πρακτικές:

Χρησιμοποιήστε βιβλιοθήκες όπως Φόρμικ, Φόρμα React Hook, ή ΤΕΛΙΚΗ ΜΟΡΦΗ για επικύρωση και καταχώριση πεδίου.
Ομαδοποίηση σχετικών πεδίων χρησιμοποιώντας ένθετα στοιχεία ή περιβάλλοντα.
Εγγραφές επικύρωση σχήματος (Ναι, Ζοντ) για λόγους συνέπειας.
Αποκλείστε τις εκτεταμένες επικυρώσεις ή τους ελέγχους API.
Διατηρήστε την κατάσταση της φόρμας τοπικά προσαρμοσμένη, εκτός εάν χρειάζεται καθολικά.

Παράδειγμα:

Το React Hook Form ελαχιστοποιεί τις επαναλήψεις απομονώνοντας την κατάσταση εισόδου.

const { register, handleSubmit } = useForm(); 
<input {...register('email', { required: true })} />

35) Ποια μοτίβα σχεδίασης είναι πιο χρήσιμα στην ανάπτυξη React και ποια είναι τα χαρακτηριστικά τους;

Απάντηση:

Το React προσφέρεται φυσικά για διάφορα πρότυπα σχεδιασμού λογισμικού για διατηρήσιμη και επεκτάσιμη αρχιτεκτονική UI.

πρότυπο	Περιγραφή	Παράδειγμα
Δοχείο-Παρουσιαστής	Διαχωρίστε τη λογική (κοντέινερ) από το περιβάλλον χρήστη (παρουσιαστής)	ΔεδομέναΚοντέινερ → Στοιχείο UI
Ελεγχόμενο-Μη ελεγχόμενο	Διαχείριση δεδομένων φόρμας μέσω κατάστασης έναντι DOM	Formik έναντι ακατέργαστων εισροών
Σύνθετα συστατικά	Γονικός έλεγχος σύνθεσης παιδιού	`<Tabs><Tab /></Tabs>`
Πρότυπο παρόχου	Κοινή χρήση κατάστασης μέσω περιβάλλοντος	ΠάροχοςΘέματος
Μοτίβο με γάντζους	Επαναχρησιμοποίηση λογικής κατάστασης	`useAuth`, `useFetch`

Παράδειγμα:

A Tabs το στοιχείο εκθέτει το πλαίσιο έτσι <Tab> τα παιδιά εγγράφονται αυτόματα — μια καθαρή εφαρμογή του Σύνθετο συστατικό μοτίβο.

36) Ποιες είναι οι βασικές διαφορές μεταξύ του React 18 και του React 19;

Απάντηση:

Το React 19 βασίζεται στα παράλληλα θεμέλια του React 18 με σημαντικές νέες δυνατότητες.

Χαρακτηριστικό	Αντίδραση 18	Αντίδραση 19
Ταυτόχρονη απόδοση	Εισήγαγε	Βελτιωμένο με καλύτερη αγωνία
Στοιχεία διακομιστή	Πειραματικός	Σταθεροποιημένο και ενσωματωμένο
API ενεργειών	Δεν υπάρχουν διαθέσιμα στοιχεία	Νέο πρότυπο για τον χειρισμό ενεργειών φόρμας
Φόρτωση περιουσιακών στοιχείων	Χειροκίνητο	Αυτόματη φόρτωση πόρων
Βελτιωμένος χειρισμός σφαλμάτων	Βασικο	Κοκκώδες με γάντζους ορίου

Κύρια Οφέλη:

Το React 19 εστιάζει σε απλούστερες μεταλλάξεις δεδομένων, ενσωματωμένες ενέργειες φόρμας, και βελτιωμένος ασύγχρονος έλεγχος, καθιστώντας την SSR και την προοδευτική ενυδάτωση πιο απρόσκοπτη.

37) Πώς λειτουργεί το Micro-Frontend ArchiΕνσωμάτωση δομής με το React και ποια είναι τα πλεονεκτήματά της;

Απάντηση:

Τα μικρο-frontends χωρίζουν μια μεγάλη διαδικτυακή εφαρμογή σε ανεξάρτητες, αναπτυσσόμενες ενότητες front-end. Σε ένα οικοσύστημα React, κάθε μικρο-frontend είναι μια αυτόνομη εφαρμογή που μπορεί να ενσωματωθεί μέσω Ομοσπονδία Ενοτήτων, iframes, ή προσαρμοσμένα προγράμματα φόρτωσης χρόνου εκτέλεσης.

Πλεονεκτήματα:

Ανεξάρτητη ανάπτυξη και κλιμάκωση.
Αυτονομία ομάδας σε όλους τους τεχνολογικούς τομείς.
Ταχύτερη κατασκευή αγωγών.

Παράδειγμα:

Χρησιμοποιώντας Webpack Module Federation, οι ομάδες μπορούν να εκθέσουν στοιχεία React σε όλες τις εφαρμογές δυναμικά:

exposes: { './NavBar': './src/NavBar' }

Μειονεκτήματα:

Πολυπλοκότητα διαχείρισης κοινής κατάστασης.
Επιβάρυνση απόδοσης από μεμονωμένα πακέτα.

38) Ποιους παράγοντες λαμβάνετε υπόψη για την κλιμάκωση μιας εφαρμογής React στην παραγωγή;

Απάντηση:

Η κλιμάκωση εφαρμογών React περιλαμβάνει τεχνικές, αρχιτεκτονικές και λειτουργικές παραμέτρους.

Βασικοί συντελεστές:

Δομή κώδικα — υιοθέτηση μονοπωλίων (Nx/Turborepo) για κοινή χρήση αρθρωτού κώδικα.
Κρατική διαχείριση — τμηματοποίηση τοπικών έναντι καθολικών καταστάσεων έναντι καταστάσεων διακομιστή.
💪 Βελτίωση της απόδοσης στην άσκηση — αργή φόρτωση, απομνημόνευση, προσωρινή αποθήκευση CDN.
παρακολούθηση — χρησιμοποιήστε Sentry, Datadog ή LogRocket για σφάλματα και μετρήσεις.
Δοκιμές & CI/CD — αυτοματοποιημένες δοκιμές αγωγών και οπτικής παλινδρόμησης.

Παράδειγμα:

Μια μεγάλη πλατφόρμα ηλεκτρονικού εμπορίου κλιμακώνει εφαρμογές React χρησιμοποιώντας Next.js για SSR, Redux Toolkit για προβλέψιμη κατάσταση και micro-frontends για απομονωμένους κλάδους.

39) Πώς δοκιμάζετε στοιχεία React που χρησιμοποιούν ασύγχρονη συμπεριφορά;

Απάντηση:

Η δοκιμή ασύγχρονων στοιχείων React απαιτεί συγχρονισμό μεταξύ του εκτελέστη δοκιμής και των ενημερώσεων κατάστασης του στοιχείου.

Καλυτερα Πρακτικές:

Χρήση waitFor or findBy* ερωτήματα στη Βιβλιοθήκη Δοκιμών React.
Προσομοιωμένες κλήσεις ανάκτησης ή API χρησιμοποιώντας msw.
Προτιμώ ψεύτικα χρονόμετρα (jest.useFakeTimers()) για εφέ που βασίζονται σε χρονικό όριο.

Παράδειγμα:

test('loads and displays data', async () => {
  render(<UserList />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Αυτό διασφαλίζει ότι η δοκιμή περιμένει τις ασύγχρονες ενημερώσεις του React πριν κάνει δηλώσεις.

40) Εξηγήστε πώς θα σχεδιάζατε μια μεγάλης κλίμακας, συντηρήσιμη δομή έργου React.

Απάντηση:

Ένα επεκτάσιμο έργο React πρέπει να εξισορροπεί την αρθρωτότητα, τη σαφήνεια και τη συνεργασία της ομάδας.

Συνιστώμενη δομή φακέλων:

src/
 ├── components/         # Reusable UI elements
 ├── features/           # Feature-specific modules
 ├── hooks/              # Custom reusable hooks
 ├── context/            # Global providers
 ├── pages/              # Route-level views
 ├── services/           # API and utilities
 ├── assets/             # Static resources
 ├── tests/              # Unit & integration tests
 └── index.js

Καλυτερα Πρακτικές:

Χρησιμοποιήστε απόλυτες εισαγωγές με ψευδώνυμα διαδρομής.
Διατηρήστε αυστηρή εφαρμογή χνούδιου (ESLint + Prettier).
Χρήση TypeScript για την ασφάλεια του τύπου.
Επιβολή ορίων στοιχείων με ατομικό σχεδιασμό ή τεμαχισμό βάσει χαρακτηριστικών.

Παράδειγμα:

Σε μια πραγματική ρύθμιση, μια λειτουργία «Χρήστη» μπορεί να περιλαμβάνει UserSlice.js, UserAPI.js, UserCard.jsx, και User.test.js, όλα μέσα src/features/user/.

🔍 Κορυφαίες ερωτήσεις συνέντευξης React.js με σενάρια πραγματικού κόσμου και στρατηγικές απαντήσεις

1) Ποιες είναι οι βασικές διαφορές μεταξύ των λειτουργικών στοιχείων και των στοιχείων κλάσης στο React.js;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να ελέγξει την κατανόησή σας σχετικά με την αρχιτεκτονική των στοιχείων του React και τις σύγχρονες βέλτιστες πρακτικές.

Παράδειγμα απάντησης:

«Τα λειτουργικά στοιχεία είναι απλούστερα και βασίζονται σε άγκιστρα για τη διαχείριση μεθόδων κατάστασης και κύκλου ζωής, ενώ τα στοιχεία κλάσης χρησιμοποιούν this και μέθοδοι κύκλου ζωής όπως componentDidMountΤα λειτουργικά στοιχεία προτιμώνται γενικά σήμερα επειδή προωθούν καθαρότερο κώδικα, είναι πιο εύκολο να δοκιμαστούν και έχουν καλύτερη απόδοση λόγω βελτιστοποιήσεων στη διαδικασία απόδοσης του React.

2) Μπορείτε να εξηγήσετε πώς λειτουργεί το Εικονικό DOM στο React;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει την κατανόησή σας για τον βασικό μηχανισμό απόδοσης του React.

Παράδειγμα απάντησης:

«Το Εικονικό DOM είναι μια αναπαράσταση του πραγματικού DOM στη μνήμη. Όταν αλλάζει η κατάσταση ενός στοιχείου, το React ενημερώνει πρώτα το Εικονικό DOM, το συγκρίνει με την προηγούμενη έκδοση χρησιμοποιώντας μια διαδικασία που ονομάζεται 'diffing' και στη συνέχεια ενημερώνει μόνο τα μέρη του πραγματικού DOM που έχουν αλλάξει. Αυτή η προσέγγιση βελτιώνει την απόδοση ελαχιστοποιώντας τον άμεσο χειρισμό του DOM.»

3) Πώς διαχειρίζεστε την κατάσταση σε μια εφαρμογή React μεγάλης κλίμακας;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να μάθει για την εμπειρία σας με τεχνικές και εργαλεία διαχείρισης πολιτείας.

Παράδειγμα απάντησης:

«Σε μεγάλες εφαρμογές, συνήθως χρησιμοποιώ κεντρικές βιβλιοθήκες διαχείρισης καταστάσεων όπως το Redux ή το Zustand. Το Redux παρέχει μια προβλέψιμη ροή δεδομένων και διευκολύνει την αποσφαλμάτωση μέσω εργαλείων εντοπισμού σφαλμάτων που σχετίζονται με ταξίδια στο χρόνο. Για απλούστερες εφαρμογές, προτιμώ να χρησιμοποιώ το Context API και τα hooks για να αποφύγω την περιττή πολυπλοκότητα.»

4) Περιγράψτε μια φορά που βελτιστοποιήσατε την απόδοση του React.

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να κατανοήσει την πρακτική σας εμπειρία με τη βελτιστοποίηση της απόδοσης.

Παράδειγμα απάντησης:

«Στον προηγούμενο ρόλο μου, η εφαρμογή μας επανεμφανιζόταν υπερβολικά λόγω περιττών αλλαγών στην κατάστασή της. Χρησιμοποίησα React.memo και την useCallback γάντζο για την αποφυγή περιττών επαναλήψεων. Ανέλυσα επίσης την απόδοση χρησιμοποιώντας το React Profiler και εντόπισα στοιχεία που χρειάζονταν απομνημόνευση, γεγονός που μείωσε τον χρόνο απόδοσης κατά σχεδόν 30%.

5) Πώς αντιμετωπίζετε τις παρενέργειες στο React;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει την κατανόησή σας σχετικά με τα hooks και τη διαχείριση του κύκλου ζωής.

Παράδειγμα απάντησης:

«Αντιμετωπίζω παρενέργειες όπως κλήσεις API ή χειρισμούς DOM χρησιμοποιώντας το useEffect γάντζο. Το γάντζο μου επιτρέπει να καθορίσω εξαρτήσεις, διασφαλίζοντας ότι το εφέ εκτελείται μόνο όταν αυτές οι εξαρτήσεις αλλάζουν. Αυτό βοηθά στη διατήρηση της προβλέψιμης συμπεριφοράς και στην αποφυγή άπειρων βρόχων.

6) Πείτε μου για ένα δύσκολο σφάλμα που αντιμετωπίσατε σε ένα έργο React και πώς το λύσατε.

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει τις δεξιότητές σας στην επίλυση προβλημάτων και την αποσφαλμάτωση.

Παράδειγμα απάντησης:

«Σε μια προηγούμενη θέση, αντιμετώπισα ένα σφάλμα όπου οι ενημερώσεις κατάστασης δεν αντικατοπτρίζονταν στο περιβάλλον χρήστη. Αφού το διερεύνησα, συνειδητοποίησα ότι το πρόβλημα προκλήθηκε από την άμεση μετάλλαξη του αντικειμένου κατάστασης αντί για τη δημιουργία ενός νέου αντιγράφου. Επαναδιαμόρφωσα τον κώδικα για να χρησιμοποιήσω αμετάβλητες ενημερώσεις, οι οποίες έλυσαν το πρόβλημα και βελτίωσαν τη συνέπεια των δεδομένων.»

7) Πώς χειρίζεστε την επικύρωση φόρμας σε εφαρμογές React;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να δει αν κατανοείτε πώς να εφαρμόσετε την επικύρωση των δεδομένων εισόδου του χρήστη.

Παράδειγμα απάντησης:

«Συνήθως χρησιμοποιώ ελεγχόμενα στοιχεία για τη διαχείριση των εισροών φόρμας, σε συνδυασμό με βιβλιοθήκες όπως το Formik ή το React Hook Form για επικύρωση. Αυτά τα εργαλεία απλοποιούν τον χειρισμό σφαλμάτων, τη διαχείριση της κατάστασης της φόρμας και την ενσωμάτωση με βιβλιοθήκες επικύρωσης τρίτων, όπως το Yup.»

8) Περιγράψτε μια περίπτωση όπου έπρεπε να συνεργαστείτε με προγραμματιστές backend ενώ εργαζόσασταν σε ένα έργο React.

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει τις ομαδικές σας εργασίες και τις επικοινωνιακές σας δεξιότητες.

Παράδειγμα απάντησης:

«Στον τελευταίο μου ρόλο, συνεργάστηκα στενά με προγραμματιστές backend για να σχεδιάσω REST API για μια εφαρμογή dashboard. Συμφωνήσαμε σε μορφές δεδομένων και τελικά σημεία κατά τα αρχικά στάδια ανάπτυξης. Δημιούργησα επίσης mock responses για να συνεχίσω την ανάπτυξη front-end ενώ το backend δημιουργούνταν, διασφαλίζοντας την ομαλή ενσωμάτωση αργότερα.»

9) Πώς διασφαλίζετε ότι τα στοιχεία React σας είναι επαναχρησιμοποιήσιμα και συντηρήσιμα;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να μάθει για την προσέγγισή σας στο σχεδιασμό και την επεκτασιμότητα των στοιχείων.

Παράδειγμα απάντησης:

«Ακολουθώ την αρχή της δημιουργίας μικρών, εστιασμένων στοιχείων που αναλαμβάνουν μία μόνο ευθύνη. Χρησιμοποιώ επίσης στηρίγματα για ευελιξία και διατηρώ το στυλ αρθρωτό με CSS-in-JS ή styled-components. Αυτό διασφαλίζει ότι τα στοιχεία μπορούν εύκολα να επαναχρησιμοποιηθούν και να συντηρηθούν σε όλο το έργο.»

10) Πώς παραμένετε ενημερωμένοι για τις τάσεις και τις βέλτιστες πρακτικές του React.js;

Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει τη δέσμευσή σας στη συνεχή μάθηση.

Παράδειγμα απάντησης:

«Παρακολουθώ την επίσημη τεκμηρίωση και τα ιστολόγια της κοινότητας του React. Παρακολουθώ επίσης ομιλίες από συνέδρια του React, όπως το React Conf, και ακούω podcast όπως το 'React Podcast'. Αυτοί οι πόροι με βοηθούν να παραμένω ενημερωμένος για νέες δυνατότητες, όπως η ταυτόχρονη απόδοση και τα Στοιχεία Διακομιστή.»

Κορυφαίες ερωτήσεις και απαντήσεις συνέντευξης React JS

1) Εξηγήστε το Εικονικό DOM και πώς λειτουργεί η συμφιλίωση στο React.

2) Ποιοι είναι οι διαφορετικοί τύποι κύκλων ζωής στοιχείων στο React και πώς αντιστοιχίζονται τα Hooks σε αυτούς;

4) Ποια στρατηγική διαχείρισης κατάστασης πρέπει να χρησιμοποιηθεί: τοπική κατάσταση, Context, Redux ή βιβλιοθήκες ερωτημάτων;

5) Ποια είναι η διαφορά μεταξύ του useEffect και του useLayoutEffect, και πότε εφαρμόζεται το καθένα;

6) Εξηγήστε πώς λειτουργούν τα κλειδιά σε λίστες και τις παγίδες της χρήσης δεικτών πινάκων.

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

7) Πού εφαρμόζονται οι τεχνικές απομνημόνευσης στο React και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;

8) Προτιμάτε ελεγχόμενα ή μη ελεγχόμενα στοιχεία για τις φόρμες; Συζητήστε τα οφέλη, τα μειονεκτήματα και τους τύπους κατάστασης της φόρμας.

9) Πότε θα χρησιμοποιούσατε το Context έναντι ενός προσαρμοσμένου hook και ποια είναι η διαφορά μεταξύ τους εννοιολογικά;

11) Ποια είναι η διαφορά μεταξύ των props και της κατάστασης στο React;

12) Εξηγήστε το μοτίβο αρχιτεκτονικής των στοιχείων στο React και τους διαφορετικούς τρόπους ταξινόμησης των στοιχείων.

13) Πώς χειρίζεται το React τα όρια σφάλματος και γιατί είναι σημαντικά;

14) Τι είναι τα React Fragments και πώς διαφέρουν από το wrapper; στοιχεία;

15) Ποιο React Hook θα χρησιμοποιούσατε για βελτιστοποίηση απόδοσης και γιατί;

16) Τι είναι οι Πύλες React και ποια είναι τα πλεονεκτήματά τους;

17) Εξηγήστε πώς το React Router διαχειρίζεται την πλοήγηση και την κατάσταση μεταξύ σελίδων.

18) Ποιοι είναι οι διαφορετικοί τρόποι αντιμετώπισης παρενεργειών σε εφαρμογές React;

19) Είναι το React ένα πλαίσιο ή μια βιβλιοθήκη; Συζητήστε τους παράγοντες που καθορίζουν τη διαφορά.

20) Πότε πρέπει να χρησιμοποιείτε το React.lazy και το Suspense και ποια είναι τα πλεονεκτήματά τους;

21) Εξηγήστε τι είναι τα Στοιχεία React Server (RSC) και τα πλεονεκτήματά τους.

22) Ποια είναι η διαφορά μεταξύ της ενυδάτωσης React και της συμφιλίωσης;

23) Πώς βελτιώνει η Ταυτόχρονη Απόδοση την εμπειρία χρήστη στο React 18+;

24) Ποιοι είναι οι διαφορετικοί τρόποι εκτέλεσης δοκιμών σε εφαρμογές React;

25) Ποια εργαλεία δημιουργίας και bundlers χρησιμοποιούνται πιο συχνά με το React και ποιες είναι οι διαφορές τους;

26) Πώς επεκτείνει το Next.js τις δυνατότητες του React;

27) Ποιες είναι μερικές συνηθισμένες παγίδες απόδοσης στο React και πώς μπορείτε να τις αποφύγετε;

28) Εξηγήστε τη διαφορά μεταξύ των useReducer και useState.

29) Πώς μπορείτε να βελτιώσετε την προσβασιμότητα (a11y) σε εφαρμογές React;

30) Μπορείτε να περιγράψετε πώς διαφέρουν ο διαχωρισμός κώδικα και η αργή φόρτωση, και πότε πρέπει να χρησιμοποιείται η καθεμία;

31) Εξηγήστε την έννοια των Render Props και πώς διαφέρει από τα Higher-Order Components (HOCs).

32) Ποιοι είναι οι διαφορετικοί τύποι προσαρμοσμένων γάντζων και τα πλεονεκτήματά τους;

33) Πώς αντιμετωπίζετε τις διαρροές μνήμης σε εφαρμογές React;

34) Ποιες είναι οι βέλτιστες πρακτικές για τη διαχείριση φορμών σε μεγάλες εφαρμογές React;

35) Ποια μοτίβα σχεδίασης είναι πιο χρήσιμα στην ανάπτυξη React και ποια είναι τα χαρακτηριστικά τους;

36) Ποιες είναι οι βασικές διαφορές μεταξύ του React 18 και του React 19;

37) Πώς λειτουργεί το Micro-Frontend ArchiΕνσωμάτωση δομής με το React και ποια είναι τα πλεονεκτήματά της;

38) Ποιους παράγοντες λαμβάνετε υπόψη για την κλιμάκωση μιας εφαρμογής React στην παραγωγή;

39) Πώς δοκιμάζετε στοιχεία React που χρησιμοποιούν ασύγχρονη συμπεριφορά;

40) Εξηγήστε πώς θα σχεδιάζατε μια μεγάλης κλίμακας, συντηρήσιμη δομή έργου React.

🔍 Κορυφαίες ερωτήσεις συνέντευξης React.js με σενάρια πραγματικού κόσμου και στρατηγικές απαντήσεις

1) Ποιες είναι οι βασικές διαφορές μεταξύ των λειτουργικών στοιχείων και των στοιχείων κλάσης στο React.js;

2) Μπορείτε να εξηγήσετε πώς λειτουργεί το Εικονικό DOM στο React;

3) Πώς διαχειρίζεστε την κατάσταση σε μια εφαρμογή React μεγάλης κλίμακας;

4) Περιγράψτε μια φορά που βελτιστοποιήσατε την απόδοση του React.

5) Πώς αντιμετωπίζετε τις παρενέργειες στο React;

6) Πείτε μου για ένα δύσκολο σφάλμα που αντιμετωπίσατε σε ένα έργο React και πώς το λύσατε.

7) Πώς χειρίζεστε την επικύρωση φόρμας σε εφαρμογές React;

8) Περιγράψτε μια περίπτωση όπου έπρεπε να συνεργαστείτε με προγραμματιστές backend ενώ εργαζόσασταν σε ένα έργο React.

9) Πώς διασφαλίζετε ότι τα στοιχεία React σας είναι επαναχρησιμοποιήσιμα και συντηρήσιμα;

10) Πώς παραμένετε ενημερωμένοι για τις τάσεις και τις βέλτιστες πρακτικές του React.js;

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο