"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Usually used to directly access a DOM element. We can make changes like we do in Valillajs. We can also be used to store a mutable value that does not cause rework when Updated. that is, changes made to the current value of UseRef will not re-render." }), "\n", _jsx(_components.p, { children: "UseState triggers the component to be rendered again, but UseRef does not trigger the component to be rendered again. so you can use use useRef according to the project you are working on. although it is not used in every project, it has a very special use in some places." }), "\n", _jsx(_components.p, { children: "We include it on our page as a priority." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useRef ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We declare a ref object whose initial value is null." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " inputRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Example:" }), "\n", _jsx(_components.p, { children: "When we click the button, our function will run and the focus function of the element we assigned to the inputRef will be called." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " useRef ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "UseRefBasics" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " inputRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleClick" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n inputRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "focus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "input ref", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "inputRef", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleClick", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Focus" }), " the input", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "UseRefBasics" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "This way we use it to access the elements in the Dom." }), "\n", _jsx(_components.p, { children: "Initial Render" }), "\n", _jsx(_components.p, { children: "Again, this is probably not something you'll use in every project, but it's essentially a nifty solution here where you can avoid running some functions after the initial render." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " useEffect", _jsx(_components.span, { className: "token punctuation", children: "," }), " useRef", _jsx(_components.span, { className: "token punctuation", children: "," }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "UseRefBasics" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "value", _jsx(_components.span, { className: "token punctuation", children: "," }), " setValue", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " renders ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "renders", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n renders", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"re-render\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "value", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "value ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "value", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "increase", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "UseRefBasics" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "So essentially what we do is avoid running any functions after the initial render.." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };