1
00:00:01,020 --> 00:00:03,150
Al final de la última conferencia,

2
00:00:03,150 --> 00:00:06,137
Dije que solo deberíamos actualizar el estado usando

3
00:00:06,137 --> 00:00:10,650
la función de establecimiento, pero no confíes sólo en mí en eso.

4
00:00:10,650 --> 00:00:15,650
Entonces, en lugar de eso, exploremos esto y rompamos React.

5
00:00:15,720 --> 00:00:18,510
Entonces, solo para ver qué pasa cuando intentamos

6
00:00:18,510 --> 00:00:20,493
para actualizar el estado manualmente.

7
00:00:22,170 --> 00:00:25,560
Ahora, ahora mismo tenemos este estado de paso aquí,

8
00:00:25,560 --> 00:00:27,750
definida como una variable constante

9
00:00:27,750 --> 00:00:30,630
y por eso no podríamos ni siquiera cambiarlo.

10
00:00:30,630 --> 00:00:33,660
Entonces, cambiemos esto a let

11
00:00:33,660 --> 00:00:36,600
Y entonces podremos romper esto.

12
00:00:36,600 --> 00:00:39,870
Entonces, digamos el siguiente nivel en el identificador,

13
00:00:39,870 --> 00:00:42,780
en lugar de actualizar el estado de la manera correcta,

14
00:00:42,780 --> 00:00:44,643
lo haríamos así.

15
00:00:46,950 --> 00:00:51,210
Entonces, paso es igual a paso más uno.

16
00:00:51,210 --> 00:00:53,100
Sería una manera perfectamente normal

17
00:00:53,100 --> 00:00:57,390
de actualizar una variable definida con let, ¿no?

18
00:00:57,390 --> 00:01:00,300
Y ahora mismo, esta es una variable let,

19
00:01:00,300 --> 00:01:02,340
entonces una variable que podemos actualizar.

20
00:01:02,340 --> 00:01:05,247
Y nuevamente, esta sería una manera perfectamente normal.

21
00:01:05,247 --> 00:01:08,280
de actualizar variables en JavaScript.

22
00:01:08,280 --> 00:01:11,940
Pero veamos qué sucede ahora cuando hacemos clic en este botón.

23
00:01:11,940 --> 00:01:14,370
Pues simplemente no pasa nada.

24
00:01:14,370 --> 00:01:17,280
Entonces, no recibimos ningún error de React,

25
00:01:17,280 --> 00:01:19,140
pero simplemente no pasa nada.

26
00:01:19,140 --> 00:01:22,800
Y entonces, la razón de esto es que React no tiene manera

27
00:01:22,800 --> 00:01:27,420
de saber que en realidad se trata de intentar actualizar el estado.

28
00:01:27,420 --> 00:01:29,512
Entonces, React no tiene una forma mágica de saberlo.

29
00:01:29,512 --> 00:01:31,948
que esta aquí es la variable de estado

30
00:01:31,948 --> 00:01:35,816
y que esta operación es básicamente actualizarlo.

31
00:01:35,816 --> 00:01:38,283
De nuevo, React no sabe sobre eso.

32
00:01:38,283 --> 00:01:40,313
y es por eso que React nos proporcionó

33
00:01:40,313 --> 00:01:44,730
con esta función de establecimiento aquí, que es una forma funcional

34
00:01:44,730 --> 00:01:48,568
de actualizar el valor del estado, pero sin mutarlo.

35
00:01:48,568 --> 00:01:52,170
Porque aquí directamente estamos mutando ahora.

36
00:01:52,170 --> 00:01:54,104
esta variable de paso, ¿verdad?

37
00:01:54,104 --> 00:01:57,000
Pero React tiene que ver con la inmutabilidad.

38
00:01:57,000 --> 00:02:00,271
Y entonces, por lo tanto, sólo podemos actualizar el estado usando

39
00:02:00,271 --> 00:02:02,825
las herramientas que nos brinda React.

40
00:02:02,825 --> 00:02:06,960
Entonces, en este caso, esta función de paso establecido.

41
00:02:06,960 --> 00:02:09,530
Y entonces esta función de establecimiento está realmente ligada

42
00:02:09,530 --> 00:02:12,360
a esta variable de estado aquí mismo.

43
00:02:12,360 --> 00:02:15,960
Entonces, cuando usamos esta forma funcional de actualizar el estado,

44
00:02:15,960 --> 00:02:19,710
entonces React sabe que esta es la variable de estado

45
00:02:19,710 --> 00:02:24,000
eso debería actualizarse, ¿vale?

46
00:02:24,000 --> 00:02:27,040
Así que nunca cometas este error, solo usa siempre const

47
00:02:27,040 --> 00:02:29,993
y siempre usa la función setter, ¿vale?

48
00:02:33,960 --> 00:02:36,210
Ahora, otra forma en la que esto podría suceder,

49
00:02:36,210 --> 00:02:38,460
lo cual podría ser un poco menos obvio,

50
00:02:38,460 --> 00:02:42,003
es cuando usamos un objeto o una matriz para el estado.

51
00:02:43,320 --> 00:02:45,420
Entonces, hagamos un experimento rápido aquí.

52
00:02:46,290 --> 00:02:51,290
Entonces, digamos prueba, por ejemplo, y luego usemos estado.

53
00:02:52,890 --> 00:02:55,833
Y aquí, por defecto, pasamos un objeto.

54
00:02:56,910 --> 00:02:59,973
Y démosle alguna propiedad de nombre.

55
00:03:01,440 --> 00:03:03,420
Ahora, observen que aquí en la desestructuración,

56
00:03:03,420 --> 00:03:06,240
Solo saqué la variable de estado en sí.

57
00:03:06,240 --> 00:03:09,090
Entonces, ahora ni siquiera tengo la función de establecimiento.

58
00:03:09,090 --> 00:03:12,243
Y aquí, digamos que quería actualizar este nombre.

59
00:03:13,800 --> 00:03:16,950
Bueno, primero imprimamos también aquí.

60
00:03:16,950 --> 00:03:19,323
Entonces, prueba.nombre.

61
00:03:20,220 --> 00:03:21,873
Entonces llevamos a Jonas allí.

62
00:03:23,520 --> 00:03:25,560
Y luego aquí, podríamos pensar que esto

63
00:03:25,560 --> 00:03:28,920
Así es como actualizamos ese estado.

64
00:03:28,920 --> 00:03:30,840
Entonces prueba.nombre.

65
00:03:30,840 --> 00:03:34,410
Y ahora usemos a Fred, por ejemplo.

66
00:03:34,410 --> 00:03:37,530
Entonces, solo algún otro nombre y sí,

67
00:03:37,530 --> 00:03:40,140
Mira lo que sucede cuando hago clic en Siguiente ahora.

68
00:03:40,140 --> 00:03:42,840
Y eso realmente funcionó.

69
00:03:42,840 --> 00:03:46,515
Entonces, mutar el objeto de esta manera en realidad desencadenó

70
00:03:46,515 --> 00:03:49,937
una nueva representación de la vista del componente.

71
00:03:49,937 --> 00:03:53,247
Sin embargo, mutar objetos como este es realmente una

72
00:03:53,247 --> 00:03:55,293
Realmente mala práctica.

73
00:03:57,030 --> 00:03:59,884
Entonces, React realmente no quiere que hagas esto.

74
00:03:59,884 --> 00:04:03,659
y eso es porque a veces, en situaciones más complejas,

75
00:04:03,659 --> 00:04:05,820
esto en realidad no funcionará.

76
00:04:05,820 --> 00:04:08,640
Y en general, es realmente una mala práctica.

77
00:04:08,640 --> 00:04:10,869
de objetos mutantes como este,

78
00:04:10,869 --> 00:04:13,094
especialmente en un marco como React,

79
00:04:13,094 --> 00:04:15,900
que tiene que ver con la inmutabilidad

80
00:04:15,900 --> 00:04:18,390
y actualizaciones del estado funcional.

81
00:04:18,390 --> 00:04:20,430
Así que nunca hagas esto.

82
00:04:20,430 --> 00:04:24,800
Entonces, si realmente deseas actualizar este objeto aquí,

83
00:04:24,800 --> 00:04:28,743
Nuevamente crearíamos una función de establecimiento aquí.

84
00:04:30,240 --> 00:04:34,440
Entonces, no crear, sino básicamente tomar esta función de establecimiento.

85
00:04:34,440 --> 00:04:37,230
fuera del estado de resultado del uso.

86
00:04:37,230 --> 00:04:42,230
Y luego aquí llamaríamos a esa función de establecimiento.

87
00:04:43,440 --> 00:04:46,710
y luego pase el nuevo objeto completo.

88
00:04:46,710 --> 00:04:49,743
Entonces, el nombre ahora debería ser Fred.

89
00:04:50,610 --> 00:04:53,340
Entonces, volvemos a lo que teníamos antes.

90
00:04:53,340 --> 00:04:57,120
Y ahora, si hacemos clic en Siguiente, todavía se actualiza el nombre.

91
00:04:57,120 --> 00:05:00,810
a Fred, pero lo hace de la manera correcta.

92
00:05:00,810 --> 00:05:04,830
Por lo tanto, trate siempre el estado como inmutable en React.

93
00:05:04,830 --> 00:05:07,445
Entonces, como algo que no puedes cambiar directamente,

94
00:05:07,445 --> 00:05:10,339
pero eso solo puedes cambiar usando las herramientas

95
00:05:10,339 --> 00:05:12,270
que nos da React.

96
00:05:12,270 --> 00:05:14,793
Entonces, usando la función de establecimiento de estado.