он будет валидировать только те поля которые изменились

вытащите валидатор из рендера, он должен быть статичен, а не каждый раз создаваться

вытащите валидатор из рендера, он должен быть статичен, а не каждый раз создаваться

его инстанс создается 1 раз, если нужны хуки есть еще https://github.com/nullgr/instant-validation/blob/development/docs/recipes.md

render () { const { validator } = this.props; const { errors } = validator.validate(this.state); }

не надо вот так делать

render () { const { validator } = this.props; const { errors } = validator.validate(this.state); }

что ты имеешь в виду

в том, что на каждый рендер, зачем-то будет возвращаться ошибки, которые статичны

что ты имеешь в виду

вызов валидации на каждый рендер

вызов валидации на каждый рендер

вай

вызов валидации на каждый рендер

там есть мемоизация и правила чекаются только те где изменились значения полей

а ну хотя в какой момент валидировать?

а ну хотя в какой момент валидировать?

в debounce, onBlur

но точно не вызывать в рендере

я замерял на 5000 полей, изменения в поле емейла с регекспом на емейл, перевалидация занимает гдето 1.5 мс

в том, что на каждый рендер, зачем-то будет возвращаться ошибки, которые статичны

наоборот ошибки НЕ статичны)

errors же меняется постоянно

наоборот ошибки НЕ статичны)

errors это объект, в котором message ошибки статичен. Зачем каждый раз возвращать новую ссылку на него?

errors это объект, в котором message ошибки статичен. Зачем каждый раз возвращать новую ссылку на него?

если так, то да

errors же меняется постоянно

да именно так

а почему нет, это классический случай как в примерах https://reactjs.org/

Если так написано в туториале на сайте реакта, это не значит что так пишут в реальных приложениях

Там контент для новичков, разжеванный чтобы работало всегда, даже когда нет класс проперти

Если так написано в туториале на сайте реакта, это не значит что так пишут в реальных приложениях

мы тоже не используем конструкор и байнд мы вобще на TS пишем и да ты прав "Там контент для новичков, разжеванный чтобы работало всегда" - у нас тоже такая цель в примере

Ну вот, не удалось нигде найти React.Component

Ни в формике ни в фф

Интересно, почему они функциями пишут, надо же наверное extends Component, новичкам же будет понятнее

Интересно, почему они функциями пишут, надо же наверное extends Component, новичкам же будет понятнее

А есть статьи почитать где описано, почему классы не тру?

А есть статьи почитать где описано, почему классы не тру?

А я не совсем о классах имел ввиду

Про конструктор и бинды

Ну может это и выглядело как "классы не тру", но я такого не говорил)

Ну может это и выглядело как "классы не тру", но я такого не говорил)

А конструкторы вроде в экземплярах класса только?

Про конструктор и бинды

а я их до сих пор люблю хоть и не использую, мне кажется это более явно чем класс пропертя

а я их до сих пор люблю хоть и не использую, мне кажется это более явно чем класс пропертя

И очень сильно увеличивает обьем кода

И очень сильно увеличивает обьем кода

это да

И очень сильно увеличивает обьем кода

ну у нас в примере вообще ... стоит для функциональных компонентов https://github.com/nullgr/instant-validation/blob/development/docs/recipes.md#usevalidator-hook

А конструкторы вроде в экземплярах класса только?

function Something() { // constructor } class Something { constructor() { // constructor } }

function Something() { // constructor } class Something { constructor() { // constructor } }

Я новичек в js. Подскажи, во втором случае содержимое в constructor() {} вызовется перед созданием Something - это же лучше, когда ты это контролируешь?

@js_noobs_ru

Бл%, начинается xD

только реакт. я понял )

никакого js

тут и за реакт ругают

иногда

Ну вот и во вью формируются такие, не интересующиеся что там под капотом.

Товарисчи! Сделал в компонентах пока тестовую задержку рендеринга в 3 секунды чз useEffect. Но фоллбэк не подгружается, просто проходит задержка и компонет отрисовывается. Вот код: const Home = lazy(() => import('./pages/Home')); const About = lazy(() => import('./pages/About')); const Skills = lazy(() => import('./pages/Skills')); const MyWork = lazy(() => import('./pages/MyWork')); const Contact = lazy(() => import('./pages/Contact')); const NoMatch = lazy(() => import('./pages/NoMatch')); function App() { return ( <div className="app"> <Toolbar /> <div className="app__page-container"> <Suspense fallback={Fallback}> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/skills" component={Skills} /> <Route path="/mywork" component={MyWork} /> <Route path="/contact" component={Contact} /> <Route component={NoMatch} /> </Switch> </Suspense> </div> </div> ); }; Ну и, соответственно, пример дочернего: function Home() { const [load, setLoad] = useState(false) useEffect(() => { setTimeout(() => { setLoad(true); }, 2000); }); if (load === true) { return ( <div>Home</div> ); } return null };

Как сделать так, чтобы фоллбэк понял, что компонент рано отрисовывать

load && Home

load && Home

а, вспомнил, условный рендеринг, я тупица, спасибо, сча полезу в доку

Как сделать так, чтобы фоллбэк понял, что компонент рано отрисовывать

Так компонент же отрисовывается. Только с null. А через таймаут ты ему не говоришь отрисоваться, а что отрисовать

Так компонент же отрисовывается. Только с null. А через таймаут ты ему не говоришь отрисоваться, а что отрисовать

а как ему запретить отрисовку до окончания таймаута (ну до load === true) ?

а как ему запретить отрисовку до окончания таймаута (ну до load === true) ?

Таймаутом надо не состояние менять. Не в курсе динамических импортов

Я так вонял, ты хочешь, пока все данные не подгрузятся, страницу не показывать?

Таймаутом надо не состояние менять. Не в курсе динамических импортов

да, все верно, но пока заглушка в виде таймаута

просто, чтобы видно было, что прелоад есть и он работает

Почему не сделать статический импорт и не отрисовать какой нибудь лоадер до того как не подгрузятся данные

да, все верно, но пока заглушка в виде таймаута

А причём тут динамический импорт? Он тебе здесь ничего не сделает

Почему не сделать статический импорт и не отрисовать какой нибудь лоадер до того как не подгрузятся данные

Как бы это единственный способ :)

Ну я вот и не понимаю почему не сделать так

Ну не единственный

Ну не единственный

Это адекватный способ

Либо я не шарю)

просто, чтобы видно было, что прелоад есть и он работает

Короче у тебя компонент Home сам должен решать, когда показывать контент, а когда прелоадер

Короче у тебя компонент Home сам должен решать, когда показывать контент, а когда прелоадер

то-есть lazy и suspense c фоллбэком не нужны?

то-есть lazy и suspense c фоллбэком не нужны?

Нет

просто отрисовывать в каждом компоненте прелоадер пока не подгрузятся данные?

Да

дак а смысл тогда в фоллбэке? если сам компонент будет рисовать прелоадер, а потом менять его на свой контент?

Нет

а, всмысле нет - не нужны?)

Именно

Нет

Ему надо просто установить фолбек для саспенса <Suspense fallback={<div>Загрузка...</div>}>

Именно

окей, а если бы я делал аякс или фетч то как бы фоллбэк должен был понять, что данные мне еще в компоненте не пришли?

а блэт

а блэт

Прикинь как все сложно :)

Ему надо просто установить фолбек для саспенса <Suspense fallback={<div>Загрузка...</div>}>

я код выше кидал, у меня все есть

Макконахи все так же актуален

окей, а если бы я делал аякс или фетч то как бы фоллбэк должен был понять, что данные мне еще в компоненте не пришли?

Да любым способом. Либо какой-то флаг, который ты ставишь после ответа, либо проверка на то, что данные вообще есть

я код выше кидал, у меня все есть

Ты точно таким же образом и 404 свою отрисуешь, просто если hasError:false, рисуешь лоадер, isLoading: false, отрисовываешь компонент

Да любым способом. Либо какой-то флаг, который ты ставишь после ответа, либо проверка на то, что данные вообще есть

Это я понял в родительском компоненте: const Home = lazy(() => import('./pages/Home')); const About = lazy(() => import('./pages/About')); const Skills = lazy(() => import('./pages/Skills')); const MyWork = lazy(() => import('./pages/MyWork')); const Contact = lazy(() => import('./pages/Contact')); const NoMatch = lazy(() => import('./pages/NoMatch')); function App() { return ( <div className="app"> <Toolbar /> <div className="app__page-container"> <Suspense fallback={Fallback}> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/skills" component={Skills} /> <Route path="/mywork" component={MyWork} /> <Route path="/contact" component={Contact} /> <Route component={NoMatch} /> </Switch> </Suspense> </div> </div> ); }; где я должен сказать ему, что допустим при клике на контакты я жду подгрузки данных с аякса?

чтобы фоллбэк отработал

Это я понял в родительском компоненте: const Home = lazy(() => import('./pages/Home')); const About = lazy(() => import('./pages/About')); const Skills = lazy(() => import('./pages/Skills')); const MyWork = lazy(() => import('./pages/MyWork')); const Contact = lazy(() => import('./pages/Contact')); const NoMatch = lazy(() => import('./pages/NoMatch')); function App() { return ( <div className="app"> <Toolbar /> <div className="app__page-container"> <Suspense fallback={Fallback}> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/skills" component={Skills} /> <Route path="/mywork" component={MyWork} /> <Route path="/contact" component={Contact} /> <Route component={NoMatch} /> </Switch> </Suspense> </div> </div> ); }; где я должен сказать ему, что допустим при клике на контакты я жду подгрузки данных с аякса?

Ещё раз повторю. Не сработает

Ты точно таким же образом и 404 свою отрисуешь, просто если hasError:false, рисуешь лоадер, isLoading: false, отрисовываешь компонент

а транзишн группы между рендерами будут кстати работать?

Это вообще не для этого