Styjun

Transactional Email API: TriggeredSend definition not enabled for this route

Bin Packing with Relational Penalization

If I have the War Caster feat, can I use the Thorn Whip cantrip to stop an enemy caster from escaping using the Dimension Door spell?

How do ohm meters measure high resistances?

Why was p[:] designed to work differently in these two situations?

How can I know if a PDF file was created via LaTeX or XeLaTeX?

Put my student loan in parents’ second mortgage - help?

Should 私の be omitted?

Why wasn't ASCII designed with a contiguous alphanumeric character order?

Converting Geographic Coordinates into Lambert2008 coordinates

How do I tell the reader that my character is autistic in Fantasy?

How to describe POV characters?

How to securely dispose of a smartphone?

Alien life interbreeding with Earth life

Is it okay to submit a paper from a master's thesis without informing the advisor?

Why would anyone even use a Portkey?

How can I deal with extreme temperatures in a hotel room?

When was this photo of Mission Dolores *actually* taken?

Can I use Alchemist's fire to turn my sword into a virtual Flame Blade?

Active wildlife outside the window- Good or Bad for Cat psychology?

What happens if a caster is surprised while casting a spell with a long casting time?

I just started should I accept a farewell lunch for a coworker I don't know?

Calculus, Water Poured into a Cone: Why is Derivative Non-linear?

Copy group of files (Filename*) to backup (Filename*.bak)

React hook useLayoutEffect not updating ref parameter on initial render

React “after render” code?React onClick function fires on renderWhy do we need middleware for async flow in Redux?How to update parent's state in React?React Router with optional path parameterReact Hooks RefsWhat's useEffect execution order and its internal clean-up logic in react hooks?How does a mechanism behind react hooks work?Calling functions in child components defined with forwardRefReact ref assignment inconsistencies when using a mapping function?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm trying to run a function to check the contrast of any DOM node against its background, passing a reference to the node itself as an argument. But on the initial render, the ref value stays null, I don't understand why.

I understand using useLayoutEffect instead of useEffect should fire synchronously. Also, maybe the issue is with the ref itself, but shouldn't the useRef do the trick?

Here's a sandbox with the full code.

This is the component part:

function App() 
 const ref = useRef(null);
 const contrast = useContrast(ref);

 return (
 <div className="App">
 <h1 ref=ref>Contrast: contrast</h1>
 </div>
 );

And the custom hook part:

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 if (!!ref.current) 
 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );
 return ref.current;
 

 return contrast;

It should display some contrast value here: <h1 ref=ref>Contrast: contrast</h1>, but all I get stays null (as it is defined by default with the useRef).

reactjs

share|improve this question

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

add a comment | 

1

I'm trying to run a function to check the contrast of any DOM node against its background, passing a reference to the node itself as an argument. But on the initial render, the ref value stays null, I don't understand why.

I understand using useLayoutEffect instead of useEffect should fire synchronously. Also, maybe the issue is with the ref itself, but shouldn't the useRef do the trick?

Here's a sandbox with the full code.

This is the component part:

function App() 
 const ref = useRef(null);
 const contrast = useContrast(ref);

 return (
 <div className="App">
 <h1 ref=ref>Contrast: contrast</h1>
 </div>
 );

And the custom hook part:

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 if (!!ref.current) 
 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );
 return ref.current;
 

 return contrast;

It should display some contrast value here: <h1 ref=ref>Contrast: contrast</h1>, but all I get stays null (as it is defined by default with the useRef).

reactjs

share|improve this question

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

add a comment | 

I'm trying to run a function to check the contrast of any DOM node against its background, passing a reference to the node itself as an argument. But on the initial render, the ref value stays null, I don't understand why.

I understand using useLayoutEffect instead of useEffect should fire synchronously. Also, maybe the issue is with the ref itself, but shouldn't the useRef do the trick?

Here's a sandbox with the full code.

This is the component part:

function App() 
 const ref = useRef(null);
 const contrast = useContrast(ref);

 return (
 <div className="App">
 <h1 ref=ref>Contrast: contrast</h1>
 </div>
 );

And the custom hook part:

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 if (!!ref.current) 
 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );
 return ref.current;
 

 return contrast;

It should display some contrast value here: <h1 ref=ref>Contrast: contrast</h1>, but all I get stays null (as it is defined by default with the useRef).

reactjs

share|improve this question

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

function App() 
 const ref = useRef(null);
 const contrast = useContrast(ref);

 return (
 <div className="App">
 <h1 ref=ref>Contrast: contrast</h1>
 </div>
 );

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 if (!!ref.current) 
 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );
 return ref.current;
 

 return contrast;

share|improve this question

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

share|improve this question

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

asked Mar 25 at 14:55

TommyEmTommyEm

833 bronze badges

1 Answer
1

active

oldest

votes

2

ref.current will be set inside the function given to useLayoutEffect, but it will not be set before it, so you can't do if (!!ref.current) ... to conditionally use the hook or not. You should not put hooks inside conditional logic at all.

This will work as you expect since state updates that occur inside the function given to useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );

 return contrast;

share|improve this answer

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55340619%2freact-hook-uselayouteffect-not-updating-ref-parameter-on-initial-render%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

ref.current will be set inside the function given to useLayoutEffect, but it will not be set before it, so you can't do if (!!ref.current) ... to conditionally use the hook or not. You should not put hooks inside conditional logic at all.

This will work as you expect since state updates that occur inside the function given to useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );

 return contrast;

share|improve this answer

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges

add a comment | 

2

ref.current will be set inside the function given to useLayoutEffect, but it will not be set before it, so you can't do if (!!ref.current) ... to conditionally use the hook or not. You should not put hooks inside conditional logic at all.

This will work as you expect since state updates that occur inside the function given to useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );

 return contrast;

share|improve this answer

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges

add a comment | 

ref.current will be set inside the function given to useLayoutEffect, but it will not be set before it, so you can't do if (!!ref.current) ... to conditionally use the hook or not. You should not put hooks inside conditional logic at all.

This will work as you expect since state updates that occur inside the function given to useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );

 return contrast;

share|improve this answer

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges

export default function useContrast(ref) 
 const [contrast, setContrast] = useState("");

 useLayoutEffect(() => 
 const contrast = contrastValidation(
 getForegroundColor(ref.current),
 getBackgroundColor(ref.current)
 );

 setContrast(contrast);
 );

 return contrast;

share|improve this answer

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges

answered Mar 25 at 15:05

TholleTholle

49.3k77 gold badges6262 silver badges8585 bronze badges