Code Splitting

Στη συγκεκριμένη διαδικτυακή εϕαρμογή δεν είναι απαραίτητο να τρέχουν όλα

τα κομμάτια κώδικα (components) από την αρχή. Αν ένας χρήστης επισκεϕθεί την

ιστοσελίδα μπορεί ή όχι να εισέλθει αυτόματα. Είτε είναι αυτή η περίπτωση είτε όχι,

μερικές σελίδες του ιστοχώρου δεν έχουν προσεγγιστεί, οπότε δεν είναι απαραίτητο

να τρέξουν τα συγκεκριμένα components, δηλαδή δεν χρειάζεται να γίνει download

του κώδικα για αυτά τα routes. Έτσι, ο αρχικός χρόνος για τη ϕόρτωση των σελίδων

της εϕαρμογής μειώνεται, επειδή κατεβαίνει λιγότερος κώδικας εξ αρχής και έτσι

η αποδοτικότητα του συστήματος αυξάνεται. Αυτό επιτυγχάνεται με την build-in

συνάρτηση React.lazy και το Suspense component όπως ϕαίνεται στο σχήμα 4.40.

Σχήμα 4.40: Χρήση της συνάρτησης React.lazy για τη διαίρεση του κώδικα.

Validation

Όπως έγινε γνωστό στην ενότητα 4.2 από τις περιπτώσεις διεπαϕής χρήστη, στα

πεδία που εισάγονται δεδομένα έχει τοποθετηθεί αντίστοιχο validation. Είναι ανα-

γκαίο λοιπόν, να παρουσιαστεί ένα παράδειγμα κώδικα που εκτελεί τουλάχιστον

μια από τις περιπτώσεις αυτές στο front-end. Στο σχήμα 4.41 προβάλλεται η περί-

πτωση της εισαγωγής password. Αυτό, γίνεται αντιληπτό από το στοιχείο validators,

το οποίο δέχεται τον validator για ελάχιστους χαρακτήρες και ελέγχει ότι το πεδίο

πρέπει να συμπληρωθεί με τουλάχιστον 6 χαρακτήρες.

React Hooks

Τα Hooks είναι μια καινούρια προσθήκη στην έκδοση 16.8 της React και επιτρέ-

πει τη χρήση του state και άλλων χαρακτηριστικών της React χωρίς να χρειάζεται

να γραϕτεί ένα class. Ουσιαστικά, τα Hooks είναι λειτουργίες που επιτρέπουν τη

σύνδεση μέσα στο state της React και στα lifecycle features της από components συ-

84